I have opened a child window using a showModal dialog where the URL points to a different website as the main window does.
I want to pass some variables from the child window to the parent window using the script below.
Script used in Parent window:
function Open() {
var Return;
Return = window.showModalDialog("https://example.com/ChildApp/ChildForm.aspx", "", "dialogWidth:670px;dialogHeight:600px;")
alert(Return.passVariable);
}
The URL for the parent window is something like this: https://example.com/MainApp/MainForm.aspx
Script used in Child window:
function Close(parameter) {
var vReturnValue = new Object();
vReturnValue.passVariable= parameter;
window.returnValue = vReturnValue;
window.close();
}
In the main window, Return returns null.
One more issue exists when I'm trying to get a reference of window.parent, it gives a null value in the child window.
Note: Here ChildApp and MainApp are two different applications.
Related
I'm trying to redirect the callback URL back to the parent window that is calling window.open. Currently the callback URL is opening inside the child window spawned from the parent.
Parent Window => Opens child window for authentication => user authenticates and is redirected to this child window. How do I redirect to the Parent Window?
Here is the call to window.open
newwindow = window.open(response.data.auth_url,'Etsy','height=800,width=1000');
if (window.focus) {
newwindow.focus()
}
Any idea how to accomplish this?
To communicate between windows use Postmessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Your scenario might be that the child window sends a message to the parent window that in turn closes the child window and redirects to the final url.
Here's the solution I came up with if anyone else runs into this issue.
In my angularJS Controller file I check for the two pieces of info I need from the callback URL:
if ($state.params.oauth_token && $state.params.oauth_verifier) {
/* This closes the child window */
$window.close();
var params = {
oauth_token: $state.params.oauth_token,
oauth_verifier: $state.params.oauth_verifier
};
/* process the info ... */
}
I also poll to see when the callback URL is made and redirect the parent window
win = window.open(response.data.auth_url,'Etsy','height=800,width=1000');
var pollTimer = window.setInterval(function() {
try {
if (win.document.URL.indexOf(response.data.callback_url) != -1) {
window.clearInterval(pollTimer);
$state.go("etsy.connected");
}
} catch(e) {
// Error Handling
}
}, 500);
I have two pages parent page and child page, I have to add the selected value from child page to parent page. The below is my code for parent page.
function lookup(){
window.open('https://c.ap4.visual.force.com/apex/accountpopup','popuppage','width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
function updateValue(param)
{
document.getElementById("name").value = param;
}
And below is my child/popup page code:
function callaccount(param){
var parent1=window.dialogAruments;
var v=param;
parent1.updateValue(param);
window.close();
}
the popup is not closing and sending values to parent page
You can use window.opener. Please note that there are other functions in window like window.open, window.self, window.top and window.parent.
But in your case, window.opener is more relevant, because it refers to the window which called window.open(...)
So, your function should be:
function callaccount(param){
var parent1=window.dialogAruments;
var v=param;
window.opener.updateValue(param);
window.close();
}
Thanks !
Use jQuery local storage
Your code should look like this page1 where you want to pass value:
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("variable", "value");
}
else {
console.log("Sorry, your browser does not support Web Storage...");
}
Your page2 where you need that data:
if (typeof(Storage) !== "undefined") {
// Retrieve
console.log(localStorage.getItem("variable"));
}
else {
console.log("Sorry, your browser does not support Web Storage...");
}
View output in console, and let me know it will helps you or not !
Use window.opener
You need to use window.opener as below in you child page.
childWindow.opener.document.getElementById('<id from parent form>').value = '123';
The opener property returns a reference to the window that created the window.
When opening a window with the window.open() method, you can use this property from the child window to return details of the parent window.
From what I understand The window object represents a window containing a DOM document.
So does that mean I will only get a "new" window object when the page is refreshed, or window.location is changed (either explicitly or through history api)?
I have a webpage with an iframe. i want to attach certain objects to the iframe.contentWindow while the parent is controlling what the iframe location is. For example:
var iframe = document.getElementById("appFrame");
iframe.contentWindow.location.href = "my other website";
iframe.contentWindow.someFunctionHandler = function() {};
But in the javascript of my iframe, i can never get the
window.someFunctionhandler.
I have problem that I can't call function of parent window in child window.
var value = "test";
function drawChart() {
myWindow = window.open("", "Chart", "width=500, height=500");
myWindow.console.log(parent.value);
myWindow.parent.createGraph();
}
function createGraph(){
...
}
I can access global variable value, but not call function createGraph.
I am getting error:
Uncaught TypeError: myWindow.createGraph is not a function
I moved all javaScript in head, but still not working.
I think you're after:
window.opener: Returns a reference to the window that opened this current window
So, for example, within your popup window, you call your function like:
window.opener.createGraph();
Edit: Of course it wouldn't work with the way you've been trying! You need to call the parent function within the scope of the opened child window. What you're doing is calling them within the same function that triggered the child window and NOT within the child window.
Here is a hacky way along the same lines of your code. Bear in mind, this is only tested on Chrome.
$("button").on("click", function() {
var win = window.open("", "Chart", "width=400,height=400");
win.console.log("New window");
win.callFunc = function(fn) {
win.console.log(fn());
}
win.callFunc(aParentFunction);
});
function aParentFunction() {
return "Hiya, I am your dad.";
}
A Demo
is it possible to access a javascript object from all browser windows?
is there a global object to store data in?
for example: we want to put information in one window from multiple opened or later opened windows.
Thank you
As long as one window is opened from another, and they open pages in the same domain, they can access each other. If you use the window.open method, you get a reference to the window object of the new window, and the window.opener property in the new window points to the window from where it was opened.
If you open a new instance of the browser, then the windows are completely separate and there is no way for the client scripts to communicate directly. Even if you open the page in a new window in the same instance, they can't communicate because they are not aware of each other.
You can pass the information to the target window via window.open , „javascript:“ using target and even initialize it, if it do not exists.
For example:
You have a page “mypage.html” and there a javascript object myObject, and want to pass from any window in the browser the information foo = 'hello'.
mypage.html :
....
var myObject = {
qs = {},
init: function()
var b = window.location.href.split("?");
if(b.length > 1){
var p = b[1].split("&");
for(var i = 0; i < p.length; i++){
var c = p[i].split("=");
qs[c[0]] = c[1];
}
}
this.doFoo();
},
doFoo: function(){
var foo = this.qs.foo;
....
}
...
};
myObject.init();
...
the calling html's:
window.open(
'javascript:if(typeof(myObject) == "undefined"){'
+ 'setTimeout(\'window.location.href = "mypage.html?foo=hello"\', 10);}'
+ 'else{myObject.qs={}; myObject.qs.foo="hello"; myObject.doFoo();}'
, "mypage"
);
the setTimeout is only needed for chrom, because he got the "window.location.href" property not at startup.
If you are targeting modern browsers, you can use HTML 5 storage.
http://www.quirksmode.org/blog/archives/2009/06/html5_storage_t.html
and as #Guffa said, you can have communication between parent window and child window
easily even without storage.