修改iframe页面中的css

最新推荐文章于 2025-02-26 13:42:00 发布

赶路人儿

最新推荐文章于 2025-02-26 13:42:00 发布

阅读量5.8k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/liuxiao723846/article/details/108386373

版权

web前端专栏收录该内容

294 篇文章

订阅专栏

在一个html页面中(a.html)使用iframe引入另外一个页面（b.html），有时候我们需要修改ifram页面的样式，该如何操作呢？假设我们没有修改b.html页面的权限（否则直接修改b.html的代码不就简单了么）。

分为两种情况。

1、a.html和b.html属于同一个域下：

思路：在b.html页面加载完毕后，在a.html中通过js获取到b.html页面中的元素，然后进行样式处理。看个例子：

1）a.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div>这是 第一个 网页</div>
    <iframe src="b.html" frameborder="0" id="frame" onload="ifram_onlaod();"></iframe>
  </body>

  <script>
  function ifram_onlaod(){
   var test =
          document.getElementById('frame').contentWindow.document.getElementById('cc');
        test.style.background = "red";
  }
  </script>
</html>

2）b.html

<html>
  <body style="background-color:#8F8FBD">
    <div id="cc">Frame A</div>
  </body>
</html>

将页面放到nginx指定目录下，访问后下过如下：

如果是在本地双击用浏览器访问上面代码，会遇到如下错误：

这个问题就是跨域访问ifram元素造成的。也就是要说的第二种情况。

2、a.html和b.html属于不同域下：

可以使用HTML5中新定义的window.postMessage 来实现跨域通信。

1）a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div> 这是 第一个 网页</div>
    <iframe src="b.html" frameborder="0" id="frame" onload="ifram_onlaod();"></iframe>
  </body>
  <script>
  function ifram_onlaod(){
   var iframe = document.getElementById('frame');
   if (iframe && iframe.contentWindow) {
     iframe.contentWindow.postMessage("red", '*');
   }
  }
  </script>
</html>

2）b.html

<html>
<body style="background-color:#8F8FBD">


<div id="cc">Frame A</div>

</body>
<script>
window.addEventListener('message', function(event) {
  document.getElementById("cc").style.background = event.data;
}, false);
</script>
</html>

注意：需要有b.html的修改权限。

参考：

https://juejin.im/post/6844903958620831752

https://cobwwweb.com/change-css-iframe

https://blog.csdn.net/bianliuzhu/article/details/80928240