在 iframe 中选择 Element 的 Div答案

【问题标题】：Select Div of Element in Iframe在 iframe 中选择 Element 的 Div
【发布时间】：2016-08-13 08:51:45
【问题描述】：

我在同一个域上有两个页面。 Home.html 和 page2.html 是它们的名称。

home.html 有以下内容

<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 有以下内容。

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

我想使用一些 javascript 从页面 home.html 上 Id="one" 的 iframe 中获取“target”的内容，然后更改元素 id=ShowHere 的 innerhtml 以显示其中的 html元素“目标”，使得，它显示了词语“一些文本”一词在“页的标题”。

我认为下面是一个开始，放在home.html的底部：

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

我四处搜索并看到了一些据说可以做到这一点的答案，但没有一个可以提供关于如何做到这一点的有意义的解释，也没有一个我可以开始工作。我更喜欢使用普通的 javascript，但 Jquery 也可以。

基于我正在尝试做的事情，即从同一域上的另一个页面获取 div 的内容（即 innerhtml），我想知道是否有比创建一个不可见的 iframe 然后阅读它更好的方法。答案其达到所期望的结果，而是通过另一种机制，也欢迎。 P>

【问题讨论】：

标签： javascript jquery html iframe innerhtml

【解决方案1】：

使用this问题的答案

所以，首先你必须找到 iframe：

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

然后你应该得到 iframe 内容：

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

现在您可以使用getElementById 在 iframe 中查找 DOM 元素：

var iframeContent;

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

现在，在 iframeContent 中，您需要在主页上显示 span 的内容，因此您只需找到要显示 iframeContent 的元素并设置 innerHTML 属性：

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

仅此而已。
希望我的回答能帮助您解决问题。
谢谢:)

【讨论】：

这个很清楚。我会试一试。您能否解释一下为什么我需要使用“iframe.contentDocument || iframe.contentWindow.document”而不仅仅是 iframe.contentDocument？如果这个问题不清楚，也许你可以多说几句关于那一行的内容。
@TiredofGoogling 好吧，据我所知，这个解决方案用于 jQuery 库，但根据 MDN 文档：从 DOM iframe 元素，脚本可以访问窗口对象通过 contentWindow 属性包含的 HTML 页面。 contentDocument 属性引用 iframe 内的文档元素（相当于 contentWindow.document），但 IE8 之前的 Internet Explorer 版本不支持。
@TiredofGoogling 所以我认为这是用于跨浏览器支持

【解决方案2】：

您可以在 iframe 中使用选择器（如 getElementById 等），类似于通过 iframe.contentWindow.document 在普通窗口中找到的选择器。

所以如果你想获取第二页target的内容，可以通过document.getElementById("one").contentWindow.document.getElementById("target")获取

编辑：

您可能还应该等到 iframe 加载完毕后再尝试从中读取元素。总之：

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

【讨论】：

你测试了吗？