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

admin · 2023-11-25 21:53:04

使用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()方法将其隐藏。

		自动登录	找回密码
密码			立即注册

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

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网