I have a html page. In the body of the page I am calling onload event which calls javascript function to open a pop up window. here is the code:
var newWindow = null;
function launchApplication()
{
if ((newWindow == null) || (newWindow.closed))
{
newWindow = window.open('abc.html','','height=960px,width=940px');
}
}
when I move to another page, and come back to that page again, popup reopens, although it is already opened. Please guide me to proper direction so that if pop up is already open then it should not open again. I tried document.referred but it requires the site online, currently I am working offline.
newWindow = window.open('abc.html','com_MyDomain_myWindowForThisPurpose','height=960px,width=940px');
Give the window a name. Basing the name on your domain like this, prevents the chances of you picking a name someone else happened to choose.
Never make up a name that begins with _, those are reserved for special names the browser treats differently (same as with the "target" attribute of anchor elements).
Note that if the window of that name was opened with different options (e.g. different height), then it'll keep those options. The options here will only take effect if there is no window of that name, so you do create a new one.
Edit:
Note that the "name" is of the window, not of the content. It doesn't affect the title (newWindow.document.title will affect that, as of course will code in abc.html). It does affect other attempts to do stuff across windows. Hence another window.open with the same name will reuse this window. Also a link like clicky! will re-use it. Normal caveats about browsers resisting window-opening in various scenarios (popup-blocking) apply.
To open a window and keep a reference to it between page refresh.
var winref = window.open('', 'MyWindowName', '');
if(winref.location.href === 'about:blank'){
winref.location.href = 'http://example.com';
}
or in function format
function openOnce(url, target){
// open a blank "target" window
// or get the reference to the existing "target" window
var winref = window.open('', target, '');
// if the "target" window was just opened, change its url
if(winref.location.href === 'about:blank'){
winref.location.href = url;
}
return winref;
}
openOnce('http://example.com', 'MyWindowName');
You can check if the window is open or closed by re-assigning a reference to it when it closes. Example:
var newWindow;
var openWindow = function(){
newWindow = newWindow || window.open('newpage.html');
newWindow.focus();
newWindow.onbeforeunload = function(){
newWindow = null;
};
};
Use the "closed" property: if a window has been closed its closed property will be true.
https://developer.mozilla.org/en-US/docs/Web/API/Window/closed
When you move on another page (on the same domain), you can re-set the window.open variable with popup page like this :
https://jsfiddle.net/u5w9v4gf/
Step to try :
Click on Run (on jsfiddle editor).
Click on Try me (on preview).
Click on Run to move on another page, the variable will be re-set.
Code :
window.currentChild = false;
$("#tryme").click(function() {
if (currentChild) currentChild.close();
const child = window.open("about:blank", "lmao", 'width=250,height=300');
currentChild = child;
//Scrope script in child windows
child.frames.eval(`
setInterval(function () {
if (!window.opener.currentChild)
window.opener.currentChild = window;
}, 500);
`);
});
setInterval(function() {
console.log(currentChild)
if (!currentChild || (currentChild && currentChild.closed))
$("p").text("No popup/child. :(")
else
$("p").text("Child detected !")
}, 500);
Related
Thank you for taking the time to look at my question.
I have two different window.open requests depending on if a user clicks on either a mobile button or a webcam button.
a mobcamWindow will open with a certain (small) size when the mobile button is clicked
a webcamWindow will open with a different (large) size when the webcam button is clicked
These windows will open fine and in the correct size, however if the webcam button is clicked while the (smaller) mobcamWindow is open, I want the current mobcamWindow to close and the new (larger) webcamWindow to open (in its correct size) and vice versa.
Currently, the window does not close, but the URL will change to the correct mobcamWindow & webcamWindow respectively, however the window will remain the same size.
I have tried to do window.resize which did not work, and window.close does not work either.
My code is as follows. (I have two functions to handle each mobcamWindow & webcamWindow, with an IF statement in each to check if mobcamWindow or webcamWindow is open, and to close it if it is.
var webcamWindow = null; // global variable
var mobcamWindow = null; // global variable
function openStreamPopupWebcam(elem) {
if(webcamWindow == null || webcamWindow.closed)
/* if the pointer to the window object in memory does not exist
or if such pointer exists but the window was closed */
{
if(mobcamWindow){
mobcamWindow.close();
}
/*if mobile window is open, close mobile window*/
webcamWindow = window.open(elem.href, "window", "width=470,height=320,resizable,status").focus();
/* then create it. The new window will be created and
will be brought on top of any other window. */
}
}
function openStreamPopupMobile(elem) {
if(mobcamWindow == null || mobcamWindow.closed)
/* if the pointer to the window object in memory does not exist
or if such pointer exists but the window was closed */
{
if(webcamWindow){
webcamWindow.close();
}
/*if mobile window is open, close mobile window*/
mobcamWindow = window.open(elem.href, "window", "width=445,height=666,resizable,status").focus();
/* then create it. The new window will be created and
will be brought on top of any other window. */
}
}
If you need any more information or are finding it hard to understand me please ask and I will try and explain as best I can.
Thank you.
You have to reinitialize the values to 'null' when those conditions are satisfied
var webcamWindow = null; // global variable
var mobcamWindow = null; // global variable
function openStreamPopupWebcam(elem){
if(webcamWindow == null || webcamWindow.closed){
if(mobcamWindow){
mobcamWindow.close();
mobcamWindow = null;
}
webcamWindow = window.open(elem.href, "window", "width=470,height=320,resizable,status").focus();
}
}
function openStreamPopupMobile(elem){
if(mobcamWindow == null || mobcamWindow.closed){
if(webcamWindow){
webcamWindow.close();
webcamWindow = null;
}
mobcamWindow = window.open(elem.href, "window", "width=445,height=666,resizable,status").focus();
}
}
Answered by Teemu
Give different names for your windows, now both are named as window. – Teemu
Thank you.
Also thank you Adarsh Mohan for pointing out that the values should be reinitialized to 'null' on close.
First time here. I'm trying to code something with these features with Javascript.
First, if a link is clicked, and there is no existing popup window, a popup window will be created, navigating to that link.
However, if second link is clicked, and there is an existing popup window, it'll run some AJAX function. We will not navigate to that link.
However, if another link is clicked, and the popup window has been closed, it'll open the window again (and navigate to that link).
The only way I can think of that allows me to solve this is using a global variable, however it's not working out. Can someone help please? Thanks!
Here's my jsfiddle
The HTML
1
<br/>
4
The Javascript
var displayWindow = null;
var test = 'test';
function openwindowPreview(id, winObject) {
// check if the window already exists
if (winObject != null) {
// the window has already been created, but did the user close it?
// if so, then reopen it. Otherwise make it the active window.
if (!winObject.closed) {
winObject.focus();
return winObject;
}
}
if (test != 'test') {
if (winObject.closed) {
test = 'test';
} else {
alert('ajax');
}
}
// if we get here, then the window hasn't been created yet, or it
// was closed by the user.
if (test == 'test') {
var urlDisplayID= "file.php?ID=" + id;
window.open(urlDisplayID, 'width=' + screen.width, 'height=' + screen.height);
test = 'tested';
}
}
Basically, only allow one instance of the window at once, and only display the first instance, while other instances (different URLs — because of the parameter) are sent to the server via AJAX.
in your case I think this maybe as your need.
var openWindows = {};
function openwindowPreview(id) {
// if we get here, then the window hasn't been created yet, or it
// was closed by the user.
var urlDisplayID= "file.php?ID=" + id;
//set id as the window name, so if the window already opened,
//the open method will find the opened window with the window name
var opened = window.open(urlDisplayID, id,'width=' + screen.width, 'height=' + screen.height);
if(opened === openWindows[id]){
alert("ajax");
}else{
openWindows[id] = opened();
}
}
open a popup window using window.open() on on html page
pop=window.open('pops.html','mypop');
when i go to new page how can i detect whether this popup still opened or closed using java script. Thank you
You could use window.opener.methodYouWantToCall() to call methods in the window that opened the new window to talk to the opening window and tell it things like "I'm still open". you can read more here. You will have to make sure that the method exists in the window though.
here is some pseudo code for how to handle it:
my_window = window.open(...);
my_window.opener.document.onUnload = function(){
my_window.opener.document.onload = function(){
my_window.opener.theWindow(a variable) = my_window;
}
};
(in new page):
function check(){
if(theWindow != null){
if(!theWindow.closed){
// handle
}
} else {
setTimeout("check()", 1000);
}
}
I have a pop-up window with a form in it. On submit of the form, I wish to redirect to a particular page, but on the parent window (not on the popup).
How can I achieve this using Javascript?
After Application of Josh Idea
I am calling a javascript function to submit a form, in this javascript, below is the mentioned code
So Can this be executed as i tried with this and its not working as per my need
function instant_popup_post()
{
var cid = document.getElementById('product').value;
var session_id = document.getElementById('sessid').value;
if(cid==30)
{
alert(document.getElementById('instantpop').onsubmit="opener.location.href = 'http://192.168.1.5/cppl11/bannerbuzznew/full_color_banner.php?&id=+cid+'&info_id=5&osCsid='+session_id;");
document.instantpop.submit();
}
else if(cid==31)
{
document.getElementById('instantpop').onsubmit="opener.location.href ='perforated_window_signs.php?&id='+cid+'&info_id=6&osCsid='+session_id;";
document.instantpop.submit();
}
else if(cid==32)
{
document.getElementById('instantpop').onsubmit="opener.location.href ='preprinted_stock_banner.php?&id='+cid+'&info_id=7&osCsid='+session_id;";
document.instantpop.submit();
}
}
plss help
From within the popup, you can use the opener property to reference the parent window...
opener.location.href = 'http://www.google.com';
You can also invoke functions on the parent window...
opener.functionName();
Of course, the good old same origin policy restrictions apply here
I would say to use showModalDialog, so you will be freezing the parent window, and after it is done, you can send a variable to parent and do the redirect:
MainWindow:
function ShowModalForm()
{
var urlToRedirect = window.showModalDialog('url');
if (urlToRedirect)
window.location = urlToRedirect;
}
Popup Window:
function buttonAcceptClicked()
{
//Do stuff you need
window.returnValue = "new url";
window.close()
}
Here is a lot of information about this.
I have parent browser window P . on clicking a button a new browser window WIN-A is opened.
then again pressing the same button it should read the title of the WIN-A window and open WIN-B
how to achieve this using Javascript?
Thanks in advance
Given:
var myWindow = open("foo.bar");
Old method: Change the window object's name property:
myWindow.name = "...";
// in foo.bar:
setInterval(someFunctionToCheckForChangesInName, 100);
HTML5 method: Call the window object's postMessage method:
myWindow.postMessage("...", "*");
// in foo.bar:
(window.addEventListener || window.attachEvent)(
(window.attachEvent && "on" || "") + "message", function (evt) {
var data = evt.data; // this is the data sent to the window
// do stuff with data
},
false);
A similar question was just asked recently:
Stack Overflow question: Quickest way to pass data to a popup window I created using window.open()?
Using that as a base (and provided Parent and WIN-A are on the same domain):
// Put outside click handler
var winA = null;
// Put inside click handler
if(!winA){
// Store the return of the `open` command in a variable
var winA = window.open('http://www.mydomain.com/page1');
} else {
var title = winA.document.title;
// Do something with title
var winB = window.open('http://www.mydomain.com/page2');
}
When you call window.open, it returns a reference to the newly opened window. You can store the references to the windows you open in an array, and then iterate that array when you need to open another new window.
Gabriel