Manage multiple Popups - javascript

I need help in managing multiple named popups created via window.open(). There are multiple popups all with a unique ID and my application requires some popups be reloaded after an ajax success in the parent window.
var myWindow = window.open("_url", uniqueId, "other params...")
if I create a single popup, it can be reloaded by calling myWindow.location.reload(). However, I am not sure how it can be done as the reference to the current popup in myWindow object gets updated everytime a new popUp is opened.
I was thinking of maybe creating a global javascript map with window.open references in it.
something like:
var myWindowArray = [];
myWindowArray[uniqueId] = window.open("_url", uniqueId, "other params...");
and later reload this popup by calling myWindowArray[uniqueId].location.reload().
I am not sure if this will work or if there is a better method for managing such circumstances.
Thanks in advance

The following is what you are looking for
var dict = {};
dict["MY_FIRST_WINDOW"] = window.open("_url", "MY_FIRST_WINDOW", "other params...");
dict["MY_FIRST_WINDOW"].location.reload();
but you say I am not sure if this will work, and that is a problem. You should always try things on your own first before asking.

Related

Do we have to create new popup every time there is an update on google crome?

Do we have to create new popup if google crome updated or we can continue with the older one.
No one is sure what you're asking, but I'm going to take a stab at it. I believe you're asking if you have to use a new popup every time an advertisement is changed? If that is the case, the answer is no, you don't always have to have a new popup. HOWEVER, if the window was closed by the user, a new popup will have to be created. The following code will bring a named window to the front:
function GetAdWindow() {
// Change the window.open parameters to your liking
var AdWindow = window.open("", "AdWindow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=500,height=500");
return AdWindow;
}
After that, you have to determine if the page is blank, or already has an advertisement on it.
function UpdateAd(){
var AdWindow = GetAdWindow();
// If the AdWindow wasn't populated (meaning it was closed)
if (AdWindow.location.href === "about:blank") {
AdWindow.location = /*ADVERTISEMENT URL*/
} else {
// DO WHATEVER YOU WANT IF THE WINDOW HAD CONTENT
}
}
If you asking if your popup will go away if Chrome has an update, the answer is yes. Chrome as a whole will shot down and close all of the windows, then start back up clean.

Accessing document.activeElement.value from an extension

I'm still working on my first Chrome extension and I've hit a wall. I'm trying to insert some text into a text field using document.activeElement.value.
I can't get it to work at all. I've used tons of examples from a bunch of folks and haven't gotten it to work.
Here's my code in my background.js that the extension uses to create the context menu and insert the text. I'm assuming at this point something is wrong with my onClickHandler or click event but I'm at a loss.
chrome.runtime.onInstalled.addListener(function() {
var context = "all";
var title = "Test";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
// add click event
chrome.contextMenus.onClicked.addListener(onClickHandler);
//The onClicked callback function.
function onClickHandler() {
document.activeElement.value = 'some text';
}
Okay, you need some background.
First off, you're executing code in the background page; as such, document refers to the background page itself.
Take a moment to read the Architecture Overview (and maybe the rest of the page if you're starting out, it's very helpful).
If you read that, you should understand you need a content script. Once injected in the active tab (and the "activeTab" permission should be enough to do it from the click handler), you can access the proper document.
However, this task is more complex than you think. There was a recent discussion on the topic; see this question for details.

Writing html to a new window with javascript

I have been doing some research on opening a new window and writting HTML to it with jQuery/JavaScript and it seems like the proper way to do it is to:
Create a variable for the new window
var w = window.open();
Insert the new data and work the variable
$(w.document.body).html(data);
And to me, that makes complete sense. however when i try to incorporate this into my script ("data" being the holder for the HTML) it does not open a new window... unless I'm just missing something simple which as far as I can tell it looks great...
function newmore(str) {
var identifier = 4;
//get the history
$.post("ajaxQuery.php", {
identifier : identifier,
vanid : str
},
//ajax query
function(data) {
//response is here
var w = window.open();
$(w.document.body).html(data);
});//end ajax
}
Any ideas?
P.S. there seems to be no errors in the console
Your new window is probably being blocked by the popup blocker built into most browsers. If you create the new window as a direct result of a user action (key, click), then the browser usually will not block it. But, if you wait until sometime later (like after an ajax call completes), then it will get blocked and that is probably what is happening in your case.
So, the fix is usually to create the window immediately in direct response to the user event (don't wait until the ajax call completes), keep the window handle in a variable and then put the content in the window later after your ajax call completes.
function newmore(str){
var identifier = 4;
// create window immediately so it won't be blocked by popup blocker
var w = window.open();
//get the history
$.post("ajaxQuery.php", {
identifier : identifier,
vanid : str
},
//ajax query
function(data) {
//response is here
$(w.document.body).html(data);
});//end ajax
}
Try instead:
var w = window.open();
w.document.write(data);
The "innerHTML" property of the document object (which is what jQuery's .html() uses) represents the HTML document, which a new window doesn't have. Even if it did, putting a complete document inside an HTML document doesn't really make sense. It's a freshly-created document, so you can just write to it.
This peace of code will work:
var data = "<h1>Test</h1>";
var w = window.open("", "mywindow1", "width=350,height=150");
$(w.document.body).html(data);
You have to inform some parameters when opening new windows.
But, if possible, I'd hardly recommend that you use another way like, jquery UI or Twitter Bootstrap for doing that, so you will not be using pop-ups.

Return value from PopUp to parent

I have a difficult question and don't know if this is possible:
I have a link on my parent window that opens a popup with a webpage: forum.website.com. This webpage is a page with a forum where an user can post a new topic. He type the subject and the content, and submits the topic. The url is now: forum.website.com?board=1&topic=X where the X is the unique id. Now this ID should be sent to the parent window, so it knows the id of the new generated topic. How can I do this with javascript?
Thanks!
Use sessionStorage for solving this:
http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/
Parent / source window code:
var storedData;
function setData(id){
storedData = id;
}
Popup code:
function topicPosted(id){
opener.setData(id);
// Do stuff
}
When you close a popup in IE, the data assigned to the opener's object by the popup is lost. That's why you need to call a function from from the popup to the opener, with the data as parameters. The function then sets (copies) the data to variables in the opener.
If it weren't for IE, you might have simply done this:
function topicPosted(id){
opener.storedData = id;
// Do stuff
}

Can I pass a JavaScript variable to another browser window?

I have a page which spawns a popup browser window. I have a JavaScript variable in the parent browser window and I would like to pass it to the popped-up browser window.
Is there a way to do this? I know this can be done across frames in the same browser window but I'm not sure if it can be done across browser windows.
Putting code to the matter, you can do this from the parent window:
var thisIsAnObject = {foo:'bar'};
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;
or this from the new window:
var myVariable = window.opener.thisIsAnObject;
I prefer the latter, because you will probably need to wait for the new page to load anyway, so that you can access its elements, or whatever you want.
Provided the windows are from the same security domain, and you have a reference to the other window, yes.
Javascript's open() method returns a reference to the window created (or existing window if it reuses an existing one). Each window created in such a way gets a property applied to it "window.opener" pointing to the window which created it.
Either can then use the DOM (security depending) to access properties of the other one, or its documents,frames etc.
Yes, scripts can access properties of other windows in the same domain that they have a handle on (typically gained through window.open/opener and window.frames/parent). It is usually more manageable to call functions defined on the other window rather than fiddle with variables directly.
However, windows can die or move on, and browsers deal with it differently when they do. Check that a window (a) is still open (!window.closed) and (b) has the function you expect available, before you try to call it.
Simple values like strings are fine, but generally it isn't a good idea to pass complex objects such as functions, DOM elements and closures between windows. If a child window stores an object from its opener, then the opener closes, that object can become 'dead' (in some browsers such as IE), or cause a memory leak. Weird errors can ensue.
Passing variables between the windows (if your windows are on the same domain) can be easily done via:
Cookies
localStorage. Just make sure your browser supports localStorage, and do the variable maintenance right (add/delete/remove) to keep localStorage clean.
One can pass a message from the 'parent' window to the 'child' window:
in the 'parent window' open the child
var win = window.open(<window.location.href>, '_blank');
setTimeout(function(){
win.postMessage(SRFBfromEBNF,"*")
},1000);
win.focus();
the to be replaced according to the context
In the 'child'
window.addEventListener('message', function(event) {
if(event.srcElement.location.href==window.location.href){
/* do what you want with event.data */
}
});
The if test must be changed according to the context
In your parent window:
var yourValue = 'something';
window.open('/childwindow.html?yourKey=' + yourValue);
Then in childwindow.html:
var query = location.search.substring(1);
var parameters = {};
var keyValues = query.split(/&/);
for (var keyValue in keyValues) {
var keyValuePairs = keyValue.split(/=/);
var key = keyValuePairs[0];
var value = keyValuePairs[1];
parameters[key] = value;
}
alert(parameters['yourKey']);
There is potentially a lot of error checking you should be doing in the parsing of your key/value pairs but I'm not including it here. Maybe someone can provide a more inclusive Javascript query string parsing routine in a later answer.
You can pass variables, and reference to things in the parent window quite easily:
// open an empty sample window:
var win = open("");
win.document.write("<html><body><head></head><input value='Trigger handler in other window!' type='button' id='button'></input></body></html>");
// attach to button in target window, and use a handler in this one:
var button = win.document.getElementById('button');
button.onclick = function() {
alert("I'm in the first frame!");
}
Yes, it can be done as long as both windows are on the same domain. The window.open() function will return a handle to the new window. The child window can access the parent window using the DOM element "opener".
For me the following doesn't work
var A = {foo:'bar'};
var w = window.open("http://example.com");
w.B = A;
// in new window
var B = window.opener.B;
But this works(note the variable name)
var B = {foo:'bar'};
var w = window.open("http://example.com");
w.B = B;
// in new window
var B = window.opener.B;
Also var B should be global.
Alternatively, you can add it to the URL and let the scripting language (PHP, Perl, ASP, Python, Ruby, whatever) handle it on the other side. Something like:
var x = 10;
window.open('mypage.php?x='+x);
I have struggled to successfully pass arguments to the newly opened window.
Here is what I came up with :
function openWindow(path, callback /* , arg1 , arg2, ... */){
var args = Array.prototype.slice.call(arguments, 2); // retrieve the arguments
var w = window.open(path); // open the new window
w.addEventListener('load', afterLoadWindow.bind(w, args), false); // listen to the new window's load event
function afterLoadWindow(/* [arg1,arg2,...], loadEvent */){
callback.apply(this, arguments[0]); // execute the callbacks, passing the initial arguments (arguments[1] contains the load event)
}
}
Example call:
openWindow("/contact",function(firstname, lastname){
this.alert("Hello "+firstname+" "+lastname);
}, "John", "Doe");
Live example
http://jsfiddle.net/rj6o0jzw/1/
You can use window.name as a data transport between windows - and it works cross domain as well. Not officially supported, but from my understanding, actually works very well cross browser.
More info here on this Stackoverflow Post
Yes browsers clear all ref. for a window. So you have to search a ClassName of something on the main window or use cookies as Javascript homemade ref.
I have a radio on my project page. And then you turn on for the radio it´s starts in a popup window and i controlling the main window links on the main page and show status of playing and in FF it´s easy but in MSIE not so Easy at all. But it can be done.
The window.open() function will also allow this if you have a reference to the window created, provided it is on the same domain.
If the variable is used server side you should be using a $_SESSION variable (assuming you are using PHP).

Categories