javascript - Select Div of Element in Iframe

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 wele.

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 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>

Share Improve this question asked Apr 20, 2016 at 15:01 TiredofGoogling 1951 gold badge3 silver badges10 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 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 : )

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;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Select Div of Element in Iframe - Stack Overflow

2 Answers 2

Using the answer for this question

Edit:

与本文相关的文章

评论列表(0)