只在iFrame中顯示div

Question

我在html頁面myPage.html中有一個iFrame，我在其中顯示另一個頁面otherPage.html 。 otherPage.html是一個包含許多元素的復雜頁面。 我想在iFrame中只顯示一個div。 所有其他人應該保持隱藏。 我怎樣才能做到這一點？

我嘗試在jQuery中使用.load（）函數而不是iFrame。 但由於某種原因，頁面無法加載。 otherPage.html從IIS服務器提供，頁面由純Javascript構建。 我不知道為什么在使用load（）函數時沒有加載任何內容。

我將如何實現這一目標？

更新：以下是一些說明：我嘗試在myPage.html上使用.load （）函數。 無論如何，在擺弄后，我發現以下工作：對於我想要展示的div，我隱藏了所有兄弟姐妹，也隱藏了其父母的所有兄弟姐妹。 以下jQuery語句似乎這樣做：

。。。。。$（ “＃myFrame”）的內容（）找到（ “＃chart1”）顯示（）parentsUntil（ '主體'）andSelf（）兄弟姐妹（）隱藏（）。

我現在只有一個問題。 當我執行以下操作時：

• 在Firefox中加載myPage.html （它還在iframe中加載otherPage.html ）
• 手動打開螢火蟲並打字

。。。。。$（ “＃myFrame”）的內容（）找到（ “＃chart1”）顯示（）parentsUntil（ '主體'）andSelf（）兄弟姐妹（）隱藏（）。

它似乎隱藏了其他一切。

但后來我想自動化它。 換句話說，當我加載myPage.html時，我希望它加載iFrame的內容。 加載iFrame內容后，我想運行此腳本：

。。。。。$（ “＃myFrame”）的內容（）找到（ “＃chart1”）顯示（）parentsUntil（ '主體'）andSelf（）兄弟姐妹（）隱藏（）。

我不能讓這個工作。 到目前為止，我嘗試了這兩種方法：

$(document).ready(function() {
    $("#myFrame").ready(function () {
        $("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
    });
});

我也試過用

$("#myFrame").load(function () {

代替。 但在這兩種情況下，腳本都不會隱藏其他元素。 因為，當我在控制台中手動使用它時腳本工作，我假設它在所有元素加載之前以某種方式運行。 請把你的想法告訴我。

Answer 1

• 隱藏iFrame中的所有內容，例如$("#myIFrame *").hide(); 或者您可以將css display屬性設置為none。

• 使用CSS選擇器，僅重新顯示所需的div。 如果你的div有id，這很容易： $('#myDiv').show();

如果div沒有id，請查看是否可以給它一個。 如果為div創建id不是一個選項，請嘗試為其父級提供id / class。

如果ID不是一個選項，您也可以找到選擇器，如:nth-child()有用。

Answer 2

你說你正在使用load（）函數。 您是在父頁面或iframe頁面中使用它嗎？ 你真的想要使用ready（）函數嗎？

$(document).ready(function(){
    // some code here ...
});

在文檔上使用ready（）將確保DOM元素已完全加載，然后將在處理程序中執行代碼。 沒有更多的信息，我不確定我能幫助你在這里嘗試什么。

使用iframe時，您應該首先記住，如果您只想顯示一個div而隱藏所有其他div，則必須確保“visible”div不在“不可見”容器中。 如果容器被隱藏，所有孩子也將被隱藏。

如果你有一個div“showme”，那么像這樣的東西會起作用：

<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>

但這樣做，一切都將被隱藏：

<div style="display:none;">
    hidden text
    <div id="showme">supposed to be visible, but hidden!!</div>
</div>

如果要更改元素的可見性或顯示，可以在iframe頁面中執行此操作，如下所示：

// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');

// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');

如果要更改PARENT頁面中元素的可見性，首先要訪問iframe，然后更改其中的元素：

// using jQuery...
// get the iframe.  ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();

// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');

// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');

有關使用子iframe中的元素的示例，請參閱此文章：

http://www.computerhowtoguy.com/jquery-and-iframes/

Answer 3

我理解你的問題。 你可以這樣做，通過DIV ID就像你有一個得到顯示為散在otherPage.html網址div id為first ，你可以先通過哈希

<iframe src="otherPage.html#first" />

並且在otherPage.html ，你可以得到這個hash並根據那個顯示你的div，但首先隱藏你所有的部分，使用css很容易，只添加"display:none;" 在css。

並嘗試這個：在otherPage.html

$(function(){
   //var divToShow = location.hash.subString(1);
   //$('#'+divToShow).show();
   var divToShow = location.hash;
   $(divToShow).show();
});