Is there any way by which I can make the parent document access the iFrame DOM but avoid the iFrame from accessing parent DOM? That is, I want only unidirectional access from my parent to the iframe DOM. My use-case is that I am trying to install Facebook conversion pixel on a webpage that I own. I dont want the facebook javascript (fbds.js) to access my DOM, so I am creating a new webpage on my domain, loading the facebook javascript into the newly created page, and loading the new page in an iFrame on my original webpage . Now I need to restrict that iframe from accessing parent DOM (for security) but allow my parent to trigger javascript functions in the iFrame window (to track events).
Related
I am trying to run some javascript inside an iframe after it loads and am having trouble. I'm not sure if it means my concept of what is happening is wrong or if my code is just wrong.
What I want to do is load a javascript file in the iframe environment and then call a function. (the iframe contents are static web pages captured with singlefile and served from my server. I want to be able to pop up menus for the images in the iframe page). Is this possible, or is it blocked for security considerations? I can get the contentDocument from the iframe and see what is in it but not make any changes to it. Adding a load event listener to the iframe runs in the top-level DOM, not the iframe.
An ugly workaround would be to add a line loading the script to each of my served html files, but I'm reluctant to do that since it seems kind of fragile. Is that my only option?
you can select the iframe element and access its internal window object.
to do this first assign an id to your iframe element
<iframe id="chosen-iframe" ...></iframe>
and to access the window use the following
const iframe = document.getElementById('chosen-iframe');
const iFrameWindowElement = iframe.contentWindow;
and with access to the window, you can create a script tag that contains the script you want to inject inside the iframe
var injectedScript = iFrameWindowElement.document.createElement("script");
injectedScript.append(...);
iFrameWindowElement.document.documentElement.appendChild(script);
I need to find the alert inside the child I frame from the parent.
And inside I frame i am keeping the another web page which i don't have access on it so i cant get the alert displayed inside I Frame.
So,how to find the alert message inside I frame from Parent.
You can't. The contents of an iframe cannot be accessed if the parent and child are served from different domains. If they could, it would be possible to wrap any 3rd party page and capture passwords etc from it.
The only way to communicate cross-domain requires you to have control of the iframe contents. If you can add a script then you can use postMessage to send events etc in both directions.
I have issue with accessing iframe that is inside another iframe.
I was trying something like this:
window.getElementById("parentIframe").contentWindow.document.getElementById("childIframe").contentWindow
But id did not worked (in my browser console i get something like "Inaccessible")
I want to know if there is a way to access nested iframe window object ?
To make things harder top parent window is on different port then iframe content. (So we have CORS to block any access from child iframe content)
Another issue is that i have no way to modify middle iframe content.
I can only embed another iframe inside of it.
My question is about accessing iframe that is inside another iframe NOT ABOUT CORS reletaed issues.
I am trying to figure out the best way to inject a full HTML page into an already existing page via a chrome extension. The problem is say I am browsing page A and want to load the facebook page onto page A, is it best to place the response from the AJAX request into a div element with the innerHTML method or should I create a new iframe and write its document? If I do go with the second answer, would I then be bound to the iframe constraints posed by facebook or other sites that don't allow iframe loading?
I was assigned a task to open a web page in iframe and user can navigate to inner pages in the iframe. But my task is to get the URL of inner page of iframe using Javascript or Jquery.
Let me explain the issue clearly,
I have a Webpage (say abc.corp.com) and I'm displaying one more webpage (say bcd.corp.com) using iframe. Basically both are from "corp.com" but I'm unable to access the child iframe DOM, we are getting permission denied access while trying to access the iframe object.
The child iframe page (bcd.corp.com) is developed and maintained by other team and we don't have access to the webpage.
We tried to change the document.domain property of both parent page and child iframe page to same domain "corp.com" but we cant modify the child iframe page domain.
Please provide a workaround for this issue.
Thanks in advance
"unable to access child iframe DOM from parent webpage"
I think that's one goal of an iframe, to separate the DOM's. But, you can get access with something like this.
function getIFrameDom( referenceToYourIFrame ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}