Отображение части DIV в iframe - PullRequest
1 голос
/ 25 января 2012

Я использую HTML-объект следующим образом

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

Теперь я не хочу отображать полные данные в mypage.aspx в HTML-объекте / iframe.Я просто хочу отобразить слой DIV из mypage.aspx на текущей странице (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>

Как можно отобразить только часть DIV1 mypage.aspx в объекте HTML?

Ответы [ 2 ]

3 голосов
/ 25 января 2012

Если вы можете избавиться от использования объекта или 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');
});

Если вы хотите прочитать о Loading Page Fragments, используя jQuery, посмотрите эту ссылку

1 голос
/ 25 января 2012

У меня нет сервера с поддержкой 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 и для простоты встроил JavaScripttest2.html:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...