Javascript Popup Window as a singleton - javascript

I have a page A which opens a javascript window as myWin = window.open(..). Now in another page B in the same domain, when user clicks on a link, I want to check if myWin is available, if yes then bring that window in front, else do a new myWin.
The problem I have is the window.js file in both pages and window.js contains the line
var myWin = null;
Within Page A scope, my logic works and brings window to front. Within Page B it works as well. Howver when I open window in Page A, click on link in Page B, it fails.
It is as if myWin is reset to null in scope of Page B. How can I overcome this problem? Pointers??/

The popup window is created by page A and only page A contains a reference to that window. When you open page B, there is no way to pass page A's reference to the popup over to page B. This cannot be done.

You want to call window.open with an empty url, e.g.
var newWindow = window.open('', title, dimension); // title needs to be a constant
if (newWindow.location.href && newWindow.location.href!='about:blank') {
// Window was already open and points to something
newWindow.focus();
} else {
// new window make it point to something
newWindow.location.href = 'http://yoursite';
}
This assumes that the popup is opening a window within the same site as the calling page, since otherwise you can encounter various permissions issues.

Related

window.open remove reference from parent

I have one page with list of reports and after clicking on report it redirects me to internal report page in new tab with:
window.open(reportIdUrl,reportId);
So when i am back on report list and i want to open same report i will use
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
But when someone from new tab with internal report page navigates somehow to report list page (within this tab) and then tries to open internal report page it will open it in same tab as it is tab reference not content reference.
Does anybody know some way to drop reference when i access if condition?
Something like:
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
window.dropReference(reportId) //change_me
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
So it will create new tab with new reportId reference?
Thanks
EXAMPLE
--reportlistpage
linkToReport1 (window.open(report1Url,1))
linkToReport2 (window.open(report2Url,2))
.
.
.
You click on linkToReport1 - 2 tabs are opened. One with reportlistpage and one with internal-report/report1.
You go back to parent tab and click to linkToReport1. Tab is opened with reference to "1" and will focus to it and no new tab is opened (this is ok).
You are on linkToReport1 and you redirect with some menu hyperlink to reportlistpage (within linkToReport1 tab). Url changed to /report-list
You click to linkToReport1. Nothing happen (this is not ok) because you are on the tab with reference to 1 (content and url changed), now you want to open a new tab with /internal-report/report1 url and store it as 1 with window references.
I figured it out. It is bit simple when you realize you can set or reset window.name. So there is nothing like references from parent.
Based on content you can do something following. In the page you want to keep track in tab,
at the beginning (in my case internalReport id):
var currentWindow = window.self;
currentWindow.name = reportId; //this is in case someone manually opened it without window.open(internalReportUrl, reportId)
then bind resetting of window.name on beforeunload event (e.g.):
var resetWindowName = function() {
var currentWindow = window.self;
currentWindow.name = ""
}
window.addEventListener('beforeunload', resetWindowName);
So when you redirect from internalreportpage somewhere, name is cleared and you can repeadetly call
window.open(internalReportUrl,reportId)
which will open new tab for you.

How to check the existence of Children Window

I have a JSP page A. And on page A, there are some links when click on them, page B or C will be popped up.
Now I have a javascript to run in page A. How can this javascript determine whether there are existing popup page B or C?
First of all you need to ensure that you have references to your opened windows available with you. It is currently not possible to get a list of already open window. If you are unsure you can refer to this answer that suggests a decent way of doing this.
Now, using the window object of the child window, you can check if it is null or not in order to know whether it is open or not:
var myWindow = window.open("https://www.google.com", "MsgWindow", "width=200,height=100");
function IsWindowClosed (win) {
return win.window == null;
}
console.log("Window is closed: ", IsWindowClosed(myWindow));
Here's a working fiddle: https://jsfiddle.net/6vhgpkmm/1/

How to refresh another page using javascript without opening the same page in a new tab

Is it possible to refresh a page from another page using Javascript or JQuery without opening the same page in a new tab.
JS:
var newtab = window.open('http://localhost:8081/app/home');
newtab.document.location.reload(true);
I tried the above, but here, it will open a new tab, with the same page, which is already opened in the browser.
Please suggest a method.
I got the idea from a previous Question , here they used window Object Reference to reload the popup window, but for me it wont work, because, the parent window and child window runs in 2 different ports. So using the same trick, what i did is :
HTML:
<a onclick="openNewTab()">app2</a>
<a onclick="refreshExistingTab()">Refresh</a>
JS:
<script>
var childWindow = "";
var newTabUrl="http://localhost:8081/app/home";
function openNewTab(){
childWindow = window.open(newTabUrl);
}
function refreshExistingTab(){
childWindow.location.href=newTabUrl;
}
</script>
refreshExistingTab() this instend of refreshExistingTab
take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window.open
basically if you do window.open and specify a window name it will overwrite that window with the url you provided.
so if you open the page each time with same window name, it should overwrite it each time you do it again from that other page.

Obtain reference to existing browser window

I'm 99% sure that the answer to my question will be no but just in case...
Use case:
Webpage A opens a new window B with JavaScript (same domain)
The user refreshes A or navigates away and then returns
The user clicks on a link in page A which should close B
This works fine by holding on to the window reference as long as the user does not refresh and navigates away from A (step 2).
Is there any (exotic or not) way to re-obtain the reference to the previously opened window(s) when returning to A?
Yes
function openWin() {
w = window.open("","windowname"); // use the window name you gave it when you opened it
if (w && !w.closed) ...
}

javascript refresh popup from another popup

Window A opens window B
Window A opens window C
On Window C (after user action) I need Window B refreshed.
some more explanation:
yes. Window A is the main calendar. window B is opened manually and is smaller and shows stats about the calendar (window A)
When user clicks on a calendar event in window A then Window C opens. And when the user changes info on Window C then Window B (stats) needs to update.
First of all I have to warn you that what you are trying to achieve is not a good practice.
Many browsers are opening new tabs instead of new windows, which can influence the availability of the window.opener . Although this depends heavily on the browser settings.
So first of all you should test to see that your code is really opening new windows, not new tabs.
Now, in a.html you should have this:
var windowB=window.open("b.html");
var windowC=window.open("c.html");
In c.html you should have this:
function openNewPage() {
window.opener.windowB.location.reload(true);
}
and call the openNewPage() function on user interaction.
You need to set references to each other the child windows to each other. Here's a simple demo.
var b= window.open('');
var c= window.open('');
b.test=function() {
alert('Function in window B');
};
c.test=function() {
b.test();
return false;
};
$(b.document).find('body').append('<div>Window B. Click here</div>');
$(c.document).find('body').append('<div>Window C. Click here</div>');
http://jsfiddle.net/9ZCX3/25/

Categories