Question

我以下面的方式使用HTML对象

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

现在，我不想在HTML对象/ iframe中的mypage.aspx中显示完整数据。我只想在当前页面中的mypage.aspx中显示DIV层（default.aspx）。我尝试使用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部分？

Answer 1

如果你可以摆脱使用object或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

Answer 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，为简单起见，我在JavaScript2.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。不过，我并没有声称这是最好的解决方案。

这是你可以做的其他一些事情，我为每个人写了评论。我评论了其中一条线，因为它发生了戏剧性的变化，我不确定你是否愿意。不过你可以尝试一下。

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

在iframe中显示DIV的一部分

2 个答案: