在iFrame中只顯示一個div

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

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

我該如何去實現這一目標？

更新： 這裏有一些澄清：我試圖用.load（）函數myPage.html下。無論如何，在擺弄後，我發現以下工作：對於我想要展示的div，我隱藏了它的所有兄弟，並且隱藏了其父節點的所有兄弟。下面的jQuery的聲明似乎要做到這一點：。。。。

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

我現在只有一個問題。當我做到以下幾點：

負載myPage.html下在Firefox（它還加載otherPage.html在的iframe）
手動打開Firebug，並鍵入

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

它似乎隱藏了一切。

但後來我想自動化它。換句話說，當我加載myPage.html我希望它加載iFrame的內容。一旦iFrame內容被加載，我想運行這個腳本：

$（「＃myFrame」）。contents（）。find（「＃chart1」）。show（）。parentsUntil（'body'） .andSelf（）的兄弟姐妹（）隱藏（）。;

我不能得到這個工作。到目前爲止，我已經試過這兩種方法：

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

我也曾嘗試使用

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

代替。但是在這兩種情況下，腳本都不會隱藏其他元素。因爲，當我在控制檯中手動使用腳本時，腳本會起作用，所以我假設它在加載所有元素之前運行。請給我你的想法。內嵌框架內

來源

2012-11-08 The Flying Dutchman

最初並非如此。但現在它與* myPage.html *在同一個文件夾中。和兩者都從IIS提供。 –

可以請你發佈一些你已經嘗試過的代碼。 –

我不能發佈大部分代碼，因爲它的機密性。我會盡可能地發佈信息。 –

隱藏一切由類似$("#myIFrame *").hide();也可以將CSS display屬性設置爲none。
使用CSS選擇器，只重新顯示你想要的div。如果您的div有一個id這是很容易的：$('#myDiv').show();

如果DIV沒有一個id，看你能不能給它一個。如果爲你的div創建一個id不是一個選項，試着給它的父母一個id/class。

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

來源

2012-11-08 04:18:47 Gapton

因爲我理解你的問題。你可以這樣做，通過DIV ID在你otherPage.html URL，以獲取顯示哈希像你有ID first一個div，你可以先通過哈希

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

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

，並嘗試這樣的：在

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

來源

2012-11-08 04:24:40

你說你正在使用load（）函數。你在父頁面還是iframe頁面使用了這個？你真的想用ready（）函數嗎？

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

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

使用iframe你應該首先記住，如果你想只有一個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');

如果您想要改變元素的可見性從父頁面首次訪問的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');

請參閱本文的例子（S）在一個孩子的iframe的元素工作：

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

來源

2012-11-08 05:05:50 Lucavai

在iFrame中只顯示一個div

回答

相關問題