How does a browser like chrome exchange data between a window and its IFrame (window being on 1 domain name and IFrame loads content from another domain name)?
My question is, how the browser can send a JS object to an IFrame? Is it done with HTTP request or some other network protocol?
I can't see it in Chrome's network tab, that's why I was wondering
TLDR; because the parent window can directly get the iframe's Window, the browser can use an offline, event-based communication protocol to communicate.
A network protocol is not needed in this case as the parent window can directly reference the embedded iframe's Window object (using HTMLIFrameElement.contentWindow, which can then be used to listen to MessageEvents).
When the parent window calls otherWindow.postMessage(...), that message is serialized internally and passed to the otherWindow, which automatically deserializes the object so long as the iframe's Window is listening for MessageEvents by having registered an event listener for message like so:
window.addEventListener("message", function(event) {
// passed offline using serialization algorithm specified in spec (2.9.1)
console.log(event.data); // contains deserialized object
});
You cant pass a JavaScript object to an iFrame, but you can still access elements from iFrame like below:
$('#iframeId').contents().find('iframe').contents().find('#element');
It will access the element (suppose a hidden field) and set the value which you need to pass and use it in your iFrame content.
should be able to read the globals.
<script>var masterOfTheUniverse = "He-Man";</script>
should be visible from anywhere in and out the iFrame.
Or, you can use the browser storage
// Store
localStorage.setItem("masterOfTheUniverse", "He-Man");
// Retrieve
localStorage.getItem("masterOfTheUniverse");
Related
I open a website in a new tab through javascript by writing the following code in the browser console:
var win = window.open("http://staging.redefinewebs.in/wildgoose-const/wp-admin/post-new.php", "mywin", '');
Now I want to add text in a field in the newly opened tab. But for that I need the access to win.document. When I write win.document in the console I get the following error:
Error: Permission denied to access property "document"
This error doesn't appear if I open other websites in new tab. So,
How to get access of document object of a window opened in a new tab with window.open?
You cannot access a child window's DOM, if it violates the Same Origin Policy.
You can access the DOM of a child window, only if the following three conditions are satisfied.
Both windows have same protocol (http/https)
Both windows have same host (google.com and news.google.com are different)
Both windows have same port (google.com:80 and google.com:443 are different)
How to get access of document object of a window opened in a new tab with window.open?
If the window is opening a document from a different origin, you don't; cross-origin access is denied by the browser because of the Same Origin Policy. From the error in your question, that would seem to be the case here.
If the window contains a document from the same origin, you can access it as you've shown; but note that it may still be loading immediately after you call window.open and you might need to wait for it to finish doing so, perhaps with the DOMContentLoaded event.
I open a website in a new tab through javascript by writing the following code in the browser console:
var win = window.open("http://staging.redefinewebs.in/wildgoose-const/wp-admin/post-new.php", "mywin", '');
Now I want to add text in a field in the newly opened tab. But for that I need the access to win.document. When I write win.document in the console I get the following error:
Error: Permission denied to access property "document"
This error doesn't appear if I open other websites in new tab. So,
How to get access of document object of a window opened in a new tab with window.open?
You cannot access a child window's DOM, if it violates the Same Origin Policy.
You can access the DOM of a child window, only if the following three conditions are satisfied.
Both windows have same protocol (http/https)
Both windows have same host (google.com and news.google.com are different)
Both windows have same port (google.com:80 and google.com:443 are different)
How to get access of document object of a window opened in a new tab with window.open?
If the window is opening a document from a different origin, you don't; cross-origin access is denied by the browser because of the Same Origin Policy. From the error in your question, that would seem to be the case here.
If the window contains a document from the same origin, you can access it as you've shown; but note that it may still be loading immediately after you call window.open and you might need to wait for it to finish doing so, perhaps with the DOMContentLoaded event.
I was trying to get the value from my child.jsp to my parent.jsp using
var myvalue = window.opener.document.getElementById(“parentId1”)
Even though there were no errors found in the console the value is not getting in the parent page.
The child popup window has the url starting like, https://host.example.com:7001/..... and the parent page url is different starts with http://anotherhost:8080/webapp.... is there any issue in communicating with a child window and a parent page which is on another server?
If so how can I solve this issue?
...is there any issue in communicating with a child window and a parent page which is on another server?
Yes, this is prevented by the browser's implementation of the Same Origin Policy.
If you control both servers, look at using Cross Origin Resource Sharing.
Alternately, if you control the JavaScript code on the pages but not the servers (or just if you prefer this mechanism), you can use postMessage to send messages from one window to another. You can't directly access the other window's elements as in your code snippet, but the two pages can cooperate to deliver the relevant value from one page to another, even cross-origin. More on postMessage: MDN | Spec
Unless you can use CORS or postMessage, I don't think you can do it client-side; you'll need a proxy.
Is it possible, from within the "http-on-modify-request" event, to identify which requests are coming from a PageWorker object, as opposed to those coming from visible tabs/windows?
Note: Because of redirects and subresources, the URL here is NOT the same URL as the pageWorkers contentURL property.
require("sdk/system/events").on("http-on-modify-request", function(e) {
var httpChannel = e.subject.QueryInterface(Ci.nsIHttpChannel),
url = httpChannel.URI.spec,
origUrl = httpChannel.originalURI.spec;
...
});
I don't know of any way to actually distinguish page-worker requests from "regular" ones.
Current, page workers are implemented like this:
The SDK essentially creates an <iframe> in the hiddenWindow (technically, in sdk/addon/window, which creates a hidden window in the hiddenWindow). The hiddenWindow in mozilla applications is more or less an always-present top-level XUL or HTML window that is simply hidden.
The worker page is loaded into that iframe.
The page-worker will then operate on the DOM on that iframe.
It is possible to identify requests originating from the hidden window and the document within the hidden window.
But identifying if the request or associated document belongs to a page-worker, let alone which page-worker instance, doesn't seem possible, judging from the code. The SDK itself could map the document associated with a request back to a page-worker, as it keeps some WeakMaps around to do so, but that is internal stuff you cannot access.
You only can say that a request is not coming from a page-worker when it is not coming from the hiddenWindow.
Also, keep in mind that there are tons of requests originating neither from a tab nor page-worker: Other (XUL) windows, add-ons, js modules and components, etc...
If it a page-worker created by your add-on that you're interested in: The contentURL property should reflect the final URI once the page is loaded.
I have an HTML page which embeds an IWebBrowser2 ActiveX (i.e. the control is essentially an Internet Explorer browser). I need to write JavaScript in this HTML page which will remove any window.onresize handler from the page loaded in the IWebBrowser2 control.
IWebBrowser2 exposes the DOM through IWebBrowser2::Document, but this is equivalent to window.document. Is there any way I can get access to window or window.onresize?
You should be able to use document.parentWindow:
var controlWindow = control.document.parentWindow;