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 （它还会加载 otherPage.html iframe）
手动打开萤火虫并输入

$（ “＃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

通过类似$("#myIFrame *").hide();的内容隐藏iFrame中的所有内容，或者您可以将css显示属性设置为无。
使用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，你必须确保＆＃34;可见＆＃34; div不在＆＃34;隐形＆＃34;容器。如果容器被隐藏，所有孩子也将被隐藏。

如果你有一个div＆＃34; showme＆＃34;，那么这样的事情就可以了：

<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();
});

只在iFrame中显示div

3 个答案: