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 加载时，它会从 css 文件加载，因此内部 html 的环绕是一个名为 modal 的类......如果我在 Chrome 中检查这个类并手动设置display:none;它会隐藏 iframe，这实际上是一个更好的解决方案几个共振，所以我尝试：

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

单击按钮时这也没有效果......有什么想法吗？

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

4

2 回答 2

4

在你的点击事件中试试这个：

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

像这样：

父网页html：

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

框架.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>

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

于 2012-09-19T16:08:19.333 回答
0

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

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

于 2012-09-19T16:00:58.243 回答