Question

我在同一个域上有两个页面。 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从iframe页面home.html上的id =“one”的iframe中获取“target”的内容，然后更改元素id = ShowHere的innerhtml以显示内部的html元素“目标”，使其在“页面标题”一词下显示“Some Text”字样。

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

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

我已经四处搜索并看到了一些应该这样做的答案，但没有一个能提供有关如何做到这一点的有意义的解释，而且没有一个我可以开始工作。我更喜欢使用普通的jilla javascript，但Jquery也没问题。

基于我想要做的事情，即从同一个域上的另一个页面获取div的内容（即innerhtml），我想知道是否有比创建不可见的iframe更好的方法然后阅读它。通过另一种机制获得预期结果的答案也是受欢迎的。

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

这就是全部。
我希望我的回答可以帮助您解决问题谢谢:)）

Answer 2

您可以通过getElementById在iframe中使用类似于普通窗口中的选择器（例如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;
}

选择Iframe中的元素Div

2 个答案:

使用this问题的答案

编辑：