javascript - 仅使 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，我隐藏了它的所有 sibling ，也隐藏了它的父级的所有 sibling 。下面的 jQuery 语句似乎可以做到这一点:

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

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

• 在 Firefox 中加载 myPage.html(它还会在iframe)
• 手动打开 firebug 并输入

$("#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 () {

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

Answer 1

• 隐藏 iFrame 中的所有内容，如 $("#myIFrame *").hide();或者您可以将 css 显示属性设置为 none。

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

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

如果 ID 不是一个选项，您还可能会找到类似 :nth-child() 的选择器有用。