在 iframe 中显示 DIV 的一部分答案

【问题标题】：Displaying a part of DIV in iframe在 iframe 中显示 DIV 的一部分
【发布时间】：2012-01-25 16:49:22
【问题描述】：

我正在以下列方式使用 HTML 对象

<object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object>

现在，我不想在 HTML 对象/iframe 中显示 mypage.aspx 中的完整数据。我只想在当前页面（default.aspx）中显示来自 mypage.aspx 的 DIV 层。我尝试使用data="mypage.aspx#div1"，但没有成功。

出于测试目的mypage.aspx 由

<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>

如何在 HTML 对象中仅显示 mypage.aspx 的 DIV1 部分？

【问题讨论】：

您可以使用 ajax 来获取 div 的内容，而不是使用 iframe。除了获取那个 div 的内容之外，还有其他使用 iframe 的理由吗？
@Walkerneo - 没有严格的理由。我刚刚发现使用 iframe 有点容易。如果您有 AJAX 或任何其他的答案，请发布。我只需要实现它，我使用什么技术并不重要。

标签： javascript jquery iframe html

【解决方案1】：

如果您可以摆脱使用对象或 iframe，您可以使用 jQuery load 方法从 mypage.aspx 获取所需的标记。在您的父页面中保留一个容器，该容器将包含来自mypage.aspx 的所需内容，然后试试这个。

$(function(){
   //Here container is a div in which #div1 from mypage.aspx will be loaded.
   $('#container').load('mypage.aspx #div1');
});

如果您想阅读有关使用 jQuery 的 Loading Page Fragments 的信息，请查看此 link

【讨论】：

当我使用类似 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(function(){ $('#container').load('index.html #div1'); }); }); </script> </head> <body> <div id="container"></div> <div id="div1">I need this in container</div> </body> </html> 的东西时它可以工作（其中 index.html 是当前页面）但是当我尝试使用 mypage.html 而不是 index.html 它不工作:(
谢谢！这行得通。对不起，我是 jQuery 的新手。不能轻易理解。现在，我得到了它的工作:) 再次感谢。
@Madcoder。 - 欢迎来到 IE 地狱，load 方法有问题 stackoverflow.com/questions/1061525/…
我以前看过那个链接，无法理解:) 如果你能回答，我会发布另一个。欢迎你。 stackoverflow.com/questions/9008350/…

【解决方案2】：

我没有支持 aspx 的服务器。所以我用纯html测试，但原理其实是一样的。

我重新创建了 test.html：

<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>

然后我制作了 test2.html，为了简单起见，我在 test2.html 中嵌入了 JavaScript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Test</title>
    <script language="javascript"type="text/javascript">

    function init() {

        var obj = document.getElementById("foo"); // Grab the frame element

        var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element

        for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
            if( kids[i].id == "div1" ) { // if child node's id is "div1"
                alert(kids[i].firstChild.nodeValue); // alert the first child of the div, e.g. text node, value
            }
        }
    }

    window.onload = init;

    </script>

</head>

<body>
    <object id="foo" name="foo" type="text/html" data="test.html"> </object>
</body>
</html>

这种方法似乎是我可以创建的最兼容跨浏览器的裸 javascript。不过，我并不是说这是最好的解决方案。

这里有一些你可以做的额外的事情，我为每一个都写了 cmets。我评论了其中一条线，因为它产生了巨大的变化，我不确定你是否喜欢。不过你可以试试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Test</title>
    <script language="javascript"type="text/javascript">

    function init() {

        var myDiv = document.createElement("div");  //create a new div
        myDiv.innerHTML = "<strong>Testing!</strong>"; // add some HTML to myDiv

        var obj = document.getElementById("foo"); // Grab the frame element

        var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element

        for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
            if( kids[i].id == "div1" ) { // if child node's id is "div1"
                kids[i].firstChild.nodeValue = "sts"; // change first text node to sts
                kids[i].appendChild( myDiv ); //append myDiv to Div1

                document.getElementById("container").innerHTML = kids[i].firstChild.nodeValue; // add text to container

                //document.getElementById("container").appendChild(kids[i]); // actually append, or insert div1 into container2, this should move the div1 out of the frame and into the document


            }
        }


    }



    window.onload = init;

    </script>

</head>

<body>
    <object id="foo" name="foo" type="text/html" data="test.html"> </object>
    <div id="container"></div>

    <div id="container2"></div>
</body>
</html>

【讨论】：

您能否说得更具体些。如何将数据添加到当前页面中的 DIV 而不是创建警报？我试过document.getElementById("container").innerHTML == kids[i].firstChild.nodeValue; 但这没有用。
嗯，在您的代码中，您列出了一个双等号或等式运算符而不是赋值。
如果您将 == 更改为 = 它应该可以工作。我在答案中添加了更多内容，以向您展示您也可以做的其他事情。