0

我在 html 页面myPage.html中有一个 iFrame，我在其中显示另一个页面otherPage.html。 otherPage.html是一个包含许多元素的复杂页面。我想在 iFrame 中只显示一个 div。所有其他人都应该保持隐藏。我怎样才能做到这一点？

我尝试在 jQuery 中使用 .load() 函数，而不是 iFrame。但由于某种原因，页面无法加载。otherPage.html由IIS 服务器提供，页面由纯 Javascript 构建。我不知道为什么当我使用 load() 函数时什么都没有加载。

我将如何实现这一目标？

更新： 这里有一些说明：我尝试在 myPage.html 上使用.load () 函数。无论如何，在摆弄之后，我发现以下工作：对于我要显示的 div，我隐藏了它的所有兄弟姐妹，也隐藏了它的父级的所有兄弟姐妹。以下 jQuery 语句似乎可以做到这一点：

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

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

  • 在 Firefox 中加载myPage.html（它还在 Iframe 中加载otherPage.html）
  • 手动打开萤火虫并输入

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

它似乎隐藏了其他一切。

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

$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();

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

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

我也尝试过使用

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

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

4

3 回答 3

1

你说你正在使用 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>

但是这样做，一切都会被隐藏：

<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 的 PARENT 页面更改元素的可见性，然后更改其中的元素：

// 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/

于 2012-11-08T05:05:50.290 回答
1

  • 通过类似的方式隐藏 iFrame 中的所有内容，$("#myIFrame *").hide();或者您​​可以将 css 显示属性设置为无。

  • 使用 CSS 选择器，仅重新显示您想要的 div。如果你的 div 有一个 id 这很容易：$('#myDiv').show();

如果 div 没有 id，看看你能不能给它一个。如果无法为您的 div 创建一个 id，请尝试为其父级提供一个 id/类。

如果 ID 不是一个选项，您可能还会发现选择器:nth-child()很有用。

于 2012-11-08T04:18:47.567 回答
0

据我了解你的问题。您可以这样做，传递 div id 以在您的 otherPage.html url 中显示为哈希，就像您有一个divwith 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();
});
于 2012-11-08T04:24:40.570 回答