Javascript 在iFrame中仅使div可见

我在一个html页面myPage.html中有一个iFrame，其中我正在显示另一个页面otherPage.html。html是一个包含许多元素的复杂页面。我只想在iFrame中显示一个div。所有其他人都应该隐藏起来。我该怎么做

我尝试在jQuery中使用.load（）函数，而不是iFrame。但由于某些原因，该页面无法加载。otherPage.html由IIS服务器提供，页面由纯Javascript构建。我不知道为什么在使用load（）函数时没有加载任何内容

我将如何实现这一目标

更新： 以下是一些澄清： 我尝试在myPage.html上使用.load（）函数。不管怎样，在闲逛之后，我发现以下几点可行： 对于要显示的div，我将隐藏其所有同级，也将隐藏其父级的所有同级。下面的jQuery语句似乎可以做到这一点：

$（“#myFrame”）.contents（）.find（“#chart1”）.show（）.parentsUntil（'body'）.andSelf（）.hide（）

我现在只有一个问题。当我执行以下操作时：

• 在Firefox中加载myPage.html（它也会在 Iframe）
• 手动打开firebug并键入

$（“#myFrame”）.contents（）.find（“#chart1”）.show（）.parentsUntil（'body'）.andSelf（）.hide（）

它似乎隐藏了其他一切

但我想让它自动化。换句话说，当我加载myPage.html时，我希望它加载iFrame的内容。加载iFrame内容后，我希望运行以下脚本：

$（“#myFrame”）.contents（）.find（“#chart1”）.show（）.parentsUntil（'body'）.andSelf（）.hide（）

我不能让它工作。到目前为止，我已经尝试了这两种方法：

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

我也尝试过使用

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

相反。但在这两种情况下，脚本都不会隐藏其他元素。因为，当我在控制台中手动使用脚本时，脚本就可以工作了，所以我假设它在加载所有元素之前以某种方式运行。请告诉我你的想法。

• 通过类似于

  $（“#myIFrame*”）的方式隐藏iFrame中的所有内容

  或者您可以将css显示属性设置为“无”

• 使用CSS选择器，仅重新显示所需的div。如果您的div有一个id，这很简单：

  $（'#myDiv'）.show（）
  

如果div没有id，请查看是否可以给它一个id。如果不能为div创建id，请尝试为其父级提供id/class

---

如果ID不是一个选项，您也可能会发现像

：nth-child（）

这样的选择器很有用。

正如我理解您的问题一样。您可以这样做，传递div id以在otherPage.html url中显示为散列，就像您有一个id为第一个的

div

，您可以传递第一个作为散列

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

---

您说您正在使用load（）函数。您是在父页面还是在iframe页面中使用此选项？你真的想使用ready（）函数吗

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

对文档使用ready（）将确保DOM元素已完全加载，然后将在处理程序中执行代码。如果没有更多的信息，我不确定我能帮上多少忙

使用iframe时，您应该首先记住，如果您只希望一个div可见，而希望隐藏所有其他div，则必须确保“可见”div不在“不可见”容器中。如果容器被隐藏，所有子容器也将被隐藏

如果您有一个div“showme”，那么类似这样的功能将起作用：

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

如果要更改父页面中元素的可见性，请首先访问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中使用元素的示例：

---

起初并非如此。但现在它与myPage.html位于同一文件夹中。这两个都是由IIS提供的。你能发布一些你尝试过的代码吗？我不能发布大部分代码，因为它是保密的。我会尽可能多地发帖。

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

// 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');

// 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');