请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

js如何设置在iframe框架中指定div不显示

 
使用JavaScript直接在iframe中指定div不显示的方法:
在iframe框架中使用JavaScript来控制指定div元素的display属性,让其不显示。可以使用以下的代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe demo</title>
    <style>
        #myDiv {
            display: block;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <h1>主页</h1>
    <iframe src="iframe.html" width="100%" height="500px"></iframe>
</body>
<script>
    window.onload = function() {
        var iframe = document.getElementsByTagName('iframe')[0];
        var iframeWindow = iframe.contentWindow || iframe.contentDocument.parentWindow;
        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        var myDiv = iframeDocument.getElementById('myDiv');

        myDiv.style.display = 'none';
    }
</script>
</html>

这里我们在iframe父窗口的JavaScript代码中获取到iframe窗口的window对象和document对象,然后获取要操作的div元素myDiv,最后将其display样式属性设置为none。

使用jQuery框架在iframe中指定div不显示的方法:
在iframe框架中使用jQuery框架来控制指定div元素的display属性,让其不显示。可以使用以下的代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe demo</title>
    <script src="//cdn.bootcss.com/jquery/3.5.1/jquery.js"></script>
    <style>
        #myDiv {
            display: block;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <h1>主页</h1>
    <iframe src="iframe.html" width="100%" height="500px"></iframe>
</body>
<script>
    $(function() {
        $('iframe').contents().find('#myDiv').hide();
    });
</script>
</html>

这里我们在iframe父窗口的jQuery代码中使用contents()方法获取到iframe的文档对象,然后使用find()方法找到要操作的div元素myDiv,最后使用hide()方法将其隐藏。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。