最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Select Div of Element in Iframe - Stack Overflow

programmeradmin2浏览0评论

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

Share Improve this question asked Apr 20, 2016 at 15:01 TiredofGooglingTiredofGoogling 1951 gold badge3 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

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;
}
发布评论

评论列表(0)

  1. 暂无评论