使用jQuery的.hide方法隐藏iframe。

Question

使用jQuery的.hide方法隐藏iframe。

3

我正在从书签创建一个iframe。该iframe具有id='contentIframe'

我想要能够从内部隐藏iframe，因此我使用以下html和jquery代码：

<button id="hide">hide</button>

<script type="text/javascript">
$(document).ready(function() {
    $("#hide").click(function() {
        $("#contentIframe").hide();
    });
});
</script>

但是当我点击按钮时，它什么也不做。

此外，当 iframe 加载时，它是从一个名为 modal 的类中的 css 文件加载的，所以内部 html 的环绕是这个类... 如果我在 Chrome 中检查这个类，并手动设置 display:none;，这将隐藏 iframe，这实际上是一种更可取的解决方案，有几个原因，所以我尝试：

<script type="text/javascript">
$(document).ready(function() {
    $("#hide").click(function() {
        $(".modal").hide();
    });
});
</script>

点击按钮时也没有任何效果...有什么想法吗？

注意：我只控制iframe，而不控制外部页面，因为iframe用于收集用户正在查看的页面的数据。

- StudioTime

您是在请求位于iframe嵌入页面中的脚本来访问外部页面的DOM吗？ - thatidiotguy

在 hide() 函数前面加上 alert("hi")，然后点击 #hide - 看看它是否会弹出提醒框。 - bobek

我认为问题是嵌入的页面是否可以访问其父级的DOM以隐藏自身。 - Pez Cuckow

@thatidiotguy 没错 - 我只能控制 iframe，而不能控制外部页面，因为 iframe 用于从用户正在查看的页面收集数据。 - StudioTime

2个回答

0

你列出的代码正在 iFrame 内运行（我想）。因此，它无法看到外部页面的 DOM，因此无法看到 contentIFrame 或 .modal。

我相信外部页面中的脚本可以引用 iFrame 内部的元素，所以你可以尝试将代码移到外部页面中...

- logical Chimp

没错...我只能控制 iframe，而不能控制外部页面，因为 iframe 用于收集用户正在浏览的页面数据。 - StudioTime

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Simmons · Accepted Answer

在您的点击事件中尝试以下代码：

$('#contentIframe', window.parent.document).hide();

像这样：

父网页的HTML代码：

<html>
    <body>
        <iframe id="contentIframe" src="frame.htm"></iframe>
    </body>
</html>

frame.htm:

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body style="background-color:red;">
        <button id="hide">hide</button>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#hide").click(function() {
                    $('#contentIframe', window.parent.document).hide();
                });
            });
        </script>
    </body>
</html>

假设父网页和框架网页都来自同一域名...