在Iframe中选择元素分割

Select Div of Element in Iframe

本文关键字：元素 分割 选择 Iframe      更新时间：2023-09-26

我在同一个域上有两个页面。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以显示元素"target"中的html，从而在单词"Title of page"下显示单词"some Text"。

我认为以下是一个开始，放在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然后阅读它更好的方法。通过另一种机制获得所需结果的答案也是受欢迎的。

使用此问题的答案

因此，首先你必须找到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中使用选择器（如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;
}
相关文章：