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.
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 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
}
Assume we have a window and an iframe with some javascript in it. The iframe sourcecode is defined directly in "srcdoc" attribute of the iframe.
Is it possible to somehow force the browser to behave like the iframe is loaded from another domain?
I mean I don't want the javascript in the iframe to be able to access the main window via "window.parent" or anything like that, because the iframe contents is not trusted. But the problem is that it's stored on the same domain and I even want to use the same request to load both the main window and the iframe contents (with that "srcdoc" attribute).
So is it possible at all?
Thanks!
You could prepend the string:
"<script> parent = top = null; </script>"
To the srcdoc. That should prevent the rest of the code in the srcdoc form accessing the parent through window.parent and window.top.
I'm not sure if there are any other ways to access the parent of an iframe.
I have an iframe loaded in a parent window of a different domain, and I want to find the pixel height difference between any point in the iframe and the iframe's document height. By iframe document height, I don't mean just the top of the iframe, but the top of the document that is loaded inside of the iframe (which are different if you scroll down inside the iframe).
I want to be able to do this from within a script in the parent window's html. Using $("iframe").offset().top to find the top of the iframe's document doesn't work for reasons stated above (I don't want the top of the iframe). Is there a way to get the reference of the document DOM element that is loaded inside of the iframe, and would that help me?
If the iframe is on a different domain, you can't do it. It would require access to the contentDocument to get the scrollTop position. While obviously knowing where the document is scrolled isn't a compromise to a user's security, accessing contentDocument on another domain is a blanket no-no.
Now, if you had a PHP file on your domain, that proxied the page from the other domain, that's another story. Such a method would be simple to implement if you're only accessing one page with no links or forms:
<?php echo file_get_contents("http://example.com/"); ?>
and...
<iframe src="myproxy.php" id="iframe" />
Now you can access the contentDocument, and therefore its contents:
document.getElementById('iframe').contentDocument.documentElement.scrollTop
// contentDocument.body.scrollTop in some browsers - get both and add them together
If there are links and/or forms, your life will be a lot more difficult. First you'd have to rewrite all URLs to go through your proxy script, then you'd have to use socket functions or cURL to POST form data to the other server... it'd just be a lot easier if you have only one page.