Select Div of Element in Iframe

Question

I have two pages on the same domain. Home.html and page2.html are their names.

home.html has the following content

<html>
    <iframe id="one" src="page2.html" style="display:none"></iframe>
    <div id="container">        
        <h1>Title of Page</h1>
        <div id="ShowHere"></div>
    </div>
</html>

page2.html has the following content.

<html>
   <div id="container">
       <span id="target">Some Text</span>
   </div>
   <span>Don't Show This Text</span>
</html>

I would like to use some javascript to get the contents of "target" from within the iframe with Id="one" on the page home.html and then change the innerhtml of the element id=ShowHere to show the html within the element "target" such that, it shows the words "Some Text" under the word "Title of Page".

I think that the following is a start, put at the bottom of home.html:

<script>
    var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
    // ANSWER TO MY QUESTION
    document.getElementById("ShowHere").innerHTML = frameSource;
</script>

I've searched around and seen a few answers that supposedly do this, but none which provide a meaningful explanation of HOW to do this, and none which I can get to work. I'd prefer to use plain vanilla javascript, but Jquery is alright too.

Based on what I am trying to do, which is get the content (i.e. innerhtml) of a div from another page on the same domain, I wonder if there is a better approach than creating an invisible iframe and then reading it. Answers which achieve the desired result, but through another mechanism are also welcome.

score 6 · Accepted Answer · edited May 23 '17 at 12:24

6

Using the answer for this question

So, firstly you have to find the iframe:

var iframe = document.getElementById('one');

Then you should get the iframe contents:

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

And now you can use getElementById to find DOM-elements in the iframe:

var iframeContent;

if (iframeDocument) {
    iframeContent = iframeDocument.getElementById('target').innerHTML;
}

Now in the iframeContent you have the contents of span you need to show on the main page, so you can just find element where you want to display iframeContent and set the innerHTML property:

var divToShow = document.getElementById('ShowHere');
divToShow.innerHTML = iframeContent;

And that's all.
I hope my answer will help you to solve your problem.
Thanks : )

edited May 23 '17 at 12:24

Community

1
1

answered Apr 20 '16 at 15:20

Eugene Korobov

176
7

1

This is very clear. And I'll give it a try. Can you please explain why I need to use "iframe.contentDocument || iframe.contentWindow.document" rather than just iframe.contentDocument? If that question is unclear, maybe you could just say a few more words about what is going on in that line. – TiredofGoogling Apr 20 '16 at 15:36
2

@TiredofGoogling Well, as far as i know, this solution is used in jQuery library, but according to the MDN docs: _From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8._ – Eugene Korobov Apr 20 '16 at 15:40
1

@TiredofGoogling So i think, that this is used for cross-browser support – Eugene Korobov Apr 20 '16 at 15:40

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

You can use selectors (like getElementById, etc) in iframes similar to those found in your normal window via iframe.contentWindow.document.

So if you wanted to get the contents of target on the second page, you can get it via document.getElementById("one").contentWindow.document.getElementById("target")

Edit:

You also probably should wait until the iframe is loaded before trying to read elements from it. So altogether:

var init = function(){
    var frameDocument = document.getElementById("one").contentWindow.document;
    document.getElementById("ShowHere").innerHTML = frameDocument.getElementById("target").innerHTML;
};

if(document.getElementById("one").contentWindow.document.getElementById("target")) { // iframe is loaded
    init();
} else {
    document.getElementById("one").contentWindow.onload = init;
}

Have you tested this out? – Derek Pollard Apr 20 '16 at 15:15 — Derek Pollard, Apr 20 '16 at 15:15

Select Div of Element in Iframe

2 Answers2

Using the answer for this question

Edit: