I have a local HTML running in IE browser. When the local HTML opens a child window which loads a page on a remote HTTP server. After a few user interactions in the child window, the final remote page runs a JavaScript to close the child window and I would like to call a function in the parent window to pass back some info before closing.
I thought I would be able to simply make the following call in the child window
window.parent.CallbackFunct();
However, the call doesn't work. I did some research and some mentioned that if the parent window loads HTML through file:\ (which is my case), the child window cannot call parent window functions due to same origin policy.
JavaScript window.opener call parent function
My above link suggests to access all pages through HTTP://, but I cannot. The parent window has to access pages from the local file system.
Is there any way that I can make it work?
You may call a parent function from child window this way:
window.opener.your_function()
Related
The webapp that I'm hosting in Electron's webview tag makes calls to window.open. However, since window.open can't be invoked from inside of an iframe in Electron, I am forced to override window.open, so that it sends a message to the renderer process that hosts the webapp and tells it to invoke window.open and send back the result.
From my renderer: webContents.send("my-channel", myWindow);
However, it doesn't appear that I can simply send back the entire window to the webapp. The window that gets sent to the webapp doesn't have any of the functions that BrowserWindowProxy is supposed to have (e.g. close). I imagine that it would be strange if it did have a close, since close would need to know to escape the webapp (through some means) and alert Electron's renderer/main process that a window needs to be closed.
I want the window that is sent to the webapp to behave like a more-or-less regular Chrome window (namely, I want it to have the same public api). So, my first question was how to get such a window to the webapp.
The solution I came up with is the following. I still call window.open in the renderer process, but instead of passing back the resulting window, I pass back an object that has a windowId property, which is set to the window's id. When that object gets to the webapp, it goes through a little intermediary that sees the window object and sets some properties (like close, focus) that internally send a message to the renderer process to perform the relevant operation (via a function exposed through the preload script). Something like:
myWindow = {
windowId: 1,
close: function() {
sendActionFromWebviewToMain("close", this.windowId);
}
}
The next problem I ran into was that the window returned by Electron's window.open, unlike the one returned by new BrowserWindow(...), does not appear to have an id. The source code references a guestId, but I have no way of accessing it.
How can I use window.open to create a window that the webapp can interact with? Am I forced to create the window using the BrowserWindow constructor?
This issue has since been fixed.
All I need to do now is set the nativeWindowOpen and allowpopups attributes on my webview tag, and I can use the native window.open.
<webview webpreferences="nativeWindowOpen=yes" allowpopups />
I want to pass the Window reference using PostMessage but getting this exception
Uncaught DataCloneError: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
below is my code:
var postWindow = window.document.getElementById('dummyId').contentWindow;
postWindow.postMessage(window, 'http://localhost:9090');
How to pass this Window reference?Any idea?
You can't. Too much stuff dangling off window does not fall into the supported types.
Pass the data you need, not absolutely everything.
I have main MainAPP application(running in 8080) in that i have a button,when i clicked that button its open a pop with new iframe and loading content from some other server(running in 9090).when i clicked the cancel button in popup,that popup has to be closed.so i need the window reference of parent(MainApp) in popup window.
So the page in the iframe needs to post a message to the parent window saying "Close me".
The event handler handler listening for the message then needs to remove the iframe.
Make the JavaScript belonging to the window containing the frame responsible for removing the frame.
The postMessage function exist to talk cross origin. It is a tool to be able to go around security (in a secure way) when for instance an iframe has a site of different origin.
You do not want to try to send the window object into it, even if you find a way.
The restriction exists so that any iframed site cannot access and modify content of its parent window.
Instead, you should define an API of messages that can be sent and handled by the other site. But it is up to the other site to handle them by itself. That way communication can be more restricted and secure.
I am trying to load a url in iframe which i dont have complete control . It loads the Javascript which has a Document.CreateElement and it has some reference to the window object which is failing because an iframe is not allowed to access the window. So i want to override the implementation of the function,So the function which i have written will run instead of the one written by the other website
it can't be done if the other website is not on your domain
Is there any way to edit the innerHTML of an iframe after you have used .location?
If the new page is in your domain, then after it has loaded¹ you can access its .contentDocument property, which is a separate document that refers to the page that you just loaded. If the new page isn't in your domain then you can't of course because that would be a cross-site scripting violation.
¹Typically by waiting for its load event, but your new page can also call a function in your parent page by using the window.parent property.
After some research (even at stackoverflow) I still can't figure out how to do this. parent.method() won't do the trick, nor some other solutions I've tried.
Situation: I have a index.html on the client side (mobile phone in this case) which has an iframe loading server-side page. What I need to do is call a javascript method defined in the index.html (client side) from the iframe content (server-side).
As an example (I'm not using android in the question described above), Android apps have addJavascriptInterface which, when defined, allows one to call methods defined client-side from server-side pages just invoking window.CustomObject.MethodToCall().
Any hint?
Thanks!
window.top.foo
for the top level window
window.parent.foo
for the direct parent
I realize I am only a year late to this party but there was no real answer.
So, in order to do this both files must be on the same domain. Since you have the index.html on the phones localhost and load a page on your site it will not work (locahost to example.com). You could load the index.html off your site as well and that would fix this problem (example.com to example.com). Then you could reference the parent frame in the normal window.top.function.
In certain situation there could be a neccessity of calling a javascript function inside an iframe from the parent document, and vice versa ie;
calling a javascript function in parent document from the iframe.
For example; the parent document have an iframe with id attribute ‘iFrameId‘, and the function ‘functionInIframe()‘ is defined in that iframe document.
Following code can call that iframe function from the parent document itself.
document.getElementById('iFrameId').contentWindow.functionInIframe();
And following code can call the function defined in parent document(functionInParent()) from the iframe itself.
parent.functionInParent();
This way javascript can interact between parent document and iframe.
This is the original post.