Question

我正在从书签中创建iframe。 iframe有id='contentIframe'

我希望能够从内部隐藏iframe所以我使用以下html＆amp; 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这实际上是几个resons的首选解决方案，所以我尝试：

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

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

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

Answer 1

在点击事件中尝试此操作：

$('#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>

这假设父网页和框架网页都是从同一个域提供的......

Answer 2

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

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

使用jquery .hide隐藏iframe

2 个答案: