jquery - 使用 jquery.hide 隐藏 iframe

标签 jquery css

我正在从小书签创建一个 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 用于从用户正在查看的页面收集数据

最佳答案

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

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

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

关于jquery - 使用 jquery.hide 隐藏 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12498437/

相关文章:

php - Wordpress 的高级自定义字段文本溢出 DIV

css - 使用 4 个 Bootstrap-3 Cols @270 设置 30px 间距

jquery - 可调整大小和可拖动在一起不尊重遏制

javascript - 如何通过单击按钮将表单发布到两个不同的页面?

jquery - 上下文 jQuery 选择器找不到某些元素,为什么?

css - 使用 CSS 绘制文件夹图标

javascript - body 需要在视差图像前面

jQuery UI Draggable/Sortable - 获取新项目的引用

jquery - 如何根据jquery中的选项创建按钮

javascript - 使用 jQuery 关闭 CSS3 动画?