How to get all nested iframes on document? - javascript

I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.
I have the following HTML structure (simplified) :
<html>
<head>
</head>
<body style="">
<div>
<div>
<div>
<iframe>
<html>
<head></head>
<body>
<div></div>
<iframe>
<html>
<head></head>
<body>
<div>
<iframe src="about:blank">
<html>
<head></head>
<body>
<img />
<iframe id="some_random_id">
<html>
<head></head>
<body>
<div>
<!-- main content -->
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
And I would like to retrieve all the iframes, ideally in an array.
I have tried the following:
document.getElementsByTagName('iframe')
But that returns an array of size 1 : [iframe]
window.frames.length give me 1
I thought about doing something like :
var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0]
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined
Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.
Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up
because the accepted answer in this question use:
for( j=0; j<m; j++) {
...
}
Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.

You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:
Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.
In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.
You have two possibilities to use <iframe> tag:
In the src attribute from <iframe> tag you could write a path to HTML file.
In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.
If you want find some elements or manipulate the content from this iframes you could use the following code:
var iframe = document.getElementById('iframeId'),
innerDoc = iframe.contentDocument ? iframe.contentDocument
: iframe.contentWindow.document;
You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.
If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).

Related

JavaScript access iframe cross domain issue

I have a snippet on www.a.com
<iframe src="www.b.com" id="my-iframe">
#document
<html>
<header>
//some headers go here
</header>
<body>
<div id="my-iframe-div"></div>
</body>
</html>
</iframe>
What I want to achieve is to add one class name on the div inside the iframe
so what I did is
const element = document.getElementById('my-iframe').contentWindow.document.getElementById('my-iframe-div');
if(element) element.classList.add('my-iframe-class')
which would result in cross domain error, because the src attribute is www.b.com, but the page is on www.b.com
How to implement that? thanks

how to get element inner <iframe> of <iframe>?

i have simple webpage and in this webpage , tage and thats id "a1" , this contain inner one more tag, and thats id "a2". i want to get element tag that's id="a2" by using javascript .
please helpe me, how can i get <h1> tag using javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get element from inner iframe </title>
</head>
<body>
<h1>hello world</h1>
<iframe id="a1" >
<iframe id="a2">
<h1 id="b1">help me</h1>
<p id="b2" >for get HTML tag using javascript DOM</p>
</iframe>
</iframe>
</body>
</html>
First of all, you can't put HTML code directly inside an iframe.
You have to separate it into a different file, and then link it by adding a "src" attribute to the iframe.
Now, assuming you have 3 file:
index.html - that contains the reference first iframe (#a1) and points to iframe1.html
iframe1.html - that contains the reference to the second iframe (#a2) and points to iframe2.html
iframe2.html - that contains the desired h1 tag (#b1)
Here is the code you need to get to it:
var iframe1 = document.getElementById('a1');
var iframeDoc1 = iframe1.contentDocument || iframe1.contentWindow.document;
var iframe2 = iframeDoc1.getElementById('a2');
var iframeDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;
var innerH1 = iframeDoc2.getElementById('b1');
Basically, you get each iframe, then you get its inner document, and then you look inside it.
An inline frame is used to embed another document within the current HTML document. Its better to user any other tag in place of iframe. As in your code h1 tag has and id attribute. You can get h1 tag by its id attribute.
var x= document.getElementById("b1");
alert(x.innerHTML);
use
var iframe = document.getElementById('iframeId');// your frame id here
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
Or you can use
window.frames['frameID'].document.getElementById('frameID')

Click on element within an iframe with no src attribute

I've been struggling with this one for a few hours now.
I am trying to attach click listeners to elements within an iframe with no src attribute. The entire page is basically inside that bad boy.
When I use "inspect element", the body of iframe looks empty (dunno if that has to do with the fact it has no src attribute.
<iframe id="CoverIframe" name="CoverIframe">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
When I enter the ID of the iframe in the console, it simply returns null, which prevents me from checking the elements it contains via contents().find() or anything else for that matter. I can only see its content (and by extension the elements on the page) by showing the source code (right click>see source).
Any thoughts on this? Is it because of the absence of src attribute? Any way I can get around it?
Thanks,
Alexis
As you noticed, you can't just set the innerDocument of an iframe like that.
However, you can use its (html-5 only)srcDoc attribute to set it,
<iframe id="CoverIframe" name="CoverIframe" srcdoc="
<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
or use a data:text/html;charset=utf-8,<html><head></head><body>hello</body></html>".
<iframe id="CoverIframe" name="CoverIframe" src="data:text/html;charset=utf-8,<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
But for the later, you will soon need to encodeURI() your page.
So the best is probably using javascript :
<script>
var yourHTML = "<html><head></head><body>hello</body></html>";
function loadFrame(e){e.contentDocument.write(yourHTML)};
</script>
<iframe id="CoverIframe" name="CoverIframe" onload="loadFrame(this)">
► Show code fiddle

How do I get a paragraph from a website and display it in an iframe?

I am trying to get the first paragraph from the website below and display it in an iframe.
Can you correct my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var iframe = document.getElementById('iframe');
$(iframe).contents().find("<p>").html();
</script>
</head>
<body>
<iframe name="iframe" id="iframe" src="https://www.baronaonlinepoker.com/blog" scrolling="yes" width="180" height="135">
</iframe>
</body>
</html>
You'd be better to use a DIV and use XMLHTTPRequest to set the innerHTML
If the browser loads a page from x.com, that page can have a frame whose source is y.com, but the x.com code will not have access to the y.com DOM. This is a cross-domain issue. You can read more here: http://en.wikipedia.org/wiki/Same-origin_policy
Please see my answer here: https://stackoverflow.com/a/19100553/98706
because I think your going about achieving something the wrong way.

Accessing IFrame elment from external page loaded inside iFrame

I would like access the IFrame element available in the main page from the IFrame source page using JavaScript
Here is my main Page
<html>
<body>
<IFrame id="page-container" src="http://stackoverflow.com"
width="200px" height="200px">
</IFrame>
</body>
</html>
Child Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"/>
<script type="text/javascript" >
$(document).ready(function(){
var containerFrame= $('#page-container');
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.frames["page-container"];
//var containerFrame=document.parent.frames["page-container"];
});
</script>
<body>
<div>some content..</div>
</body>
</html>
I am getting undefined for all my tries.
How it can be done? Is it possible?
Edit: I tried loading a cross domain page.
In IE i am getting error ' for security reason framing is not allowed' and also
domains, protocols and port must match. Can we achieve this any way?
var containerFrame = $('#page-container', window.parent.document)
This should firstly reference the parent of the window and then look for the iframe div
You need to specify the context to search for #page-container in, which in this case will be the parent window.
var containerFrame = $('#page-container', window.parent.document);

Categories