在IFRAME

顯示DIV的一部分，我使用HTML對象在下面的方式在IFRAME

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

現在，我不想在mypage.aspx在HTML對象/ iframe中顯示完整的內容。我只想在當前頁面（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一部分？

來源

2012-01-25 Mad coder.

您可以使用ajax抓取div的內容而不是使用iframe。是否有理由使用iframe而不是獲取該div的內容？ – mowwwalker

@Walkerneo - 沒有嚴格的原因。我剛剛發現使用iframe有點容易。如果你有AJAX或任何其他的答案請發佈。我只需要實施它，不管我使用什麼技術。 –

如果你可以擺脫使用對象或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來看看這個link

來源

2012-01-25 16:59:20 ShankarSangoli

對不起！這對我不起作用:( –

當我使用像這樣的'

I need this in container

'它的工作（其中index.html是當前頁面），但是當我嘗試使用mypage.html而不是索引。它不工作:( –

謝謝！這工作。對不起，我是jQuery的新手。無法輕鬆理解。現在，我得到它工作:)再次感謝。 –

閱讀我沒有一個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和簡單起見，我嵌入JavaScript的在test2.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>

來源

2012-01-25 17:55:57 user17753

你可以請更具體。如何將數據添加到當前頁面中的DIV而不是創建警報？我試過'document.getElementById（「container」）。innerHTML == kids [i] .firstChild.nodeValue;'但是這不起作用。 –

恩，在你的代碼中，你列出了一個double equals，或者等號運算符而不是賦值。 – user17753

如果您將==更改爲=它應該可以工作。我在答案中添加了更多內容，以向您展示您可以做的其他事情。 – user17753

回答

相關問題