欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

修改 iframe 中的 CSS 样式 有大用 有大大用

工作中总能遇到 引用别人的页面,就会带来很多问题,比如iframe中的样式不满足我们的需求,这就需要修改iframe中的样式,

见下面红色的字

下面我们做一个修改 iframe 中样式的 Demo:

知识点:

  1. let test =
  2.     document.getElementById('引用的iframeId').contentWindow.document.getElementById('修改样式的Id');
  3. test.style.width = "200px";

第1步:创建一个setIframeStyle文件夹

第2步:在setIframeStyle文件夹中创建 A.html 和 B.html

    2.1:    A.html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Page Title</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" type="text/css" media="screen" />
  9. <script>
  10. window.onload = function () {
  11. var test =
  12. document.getElementById('frame').contentWindow.document.getElementById('cc');
  13. test.style.background = "#333";
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <div>
  19. 这是 第一个 网页
  20. </div>
  21. <iframe src="2.html" frameborder="0" id="frame" width="100%" height="100%"></iframe>
  22. </body>
  23. </html>

     2.2:    B.html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Page Title</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" type="text/css" media="screen" />
  9. </head>
  10. <body>
  11. <div id="cc">
  12. 这是 2 网页
  13. </div>
  14. </body>
  15. </html>

第3步: 打开 vscode 安装 live server 插件

 第4步: 下面的 截图 是 这个 demo 的整体, 对照下 看看 一样不

 第五步: 点击下面截图中箭头指向的图标 运行 A.html

Go Live Control Preview

 iframe 中的 背景变成 灰色了 到了这一步就算成功了, 接着往下看

but ....

不是所有的页面都是引用本地的,如果网络资源,比如百度呢?接下来说说引用网络资源

    1.将A.html中 iframe 的 src 属性 修改为 www.baidu.com

<iframe src="https://www.baidu.com/" frameborder="0" id="frame" width="100%" height="800px"></iframe>

运行 A.html 发现报错了

原因: 浏览器有一个同源策略限制

第一种: 限制就是不能通过 ajax 的方法去请求不同源的文档。

第二种: 限制是不能浏览器中不同域的 iframe 之间是不能进行js的交互操作的。

我们修改下 A.html中 代码 :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Page Title</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" type="text/css" media="screen" />
  9. <script>
  10. </script>
  11. </head>
  12. <body>
  13. <div>
  14. 这是 第一个 网页
  15. </div>
  16. <iframe src="https://www.baidu.com/" frameborder="0" id="frame" width="100%" height="400px"></iframe>
  17. </body>
  18. <script>
  19. window.onload = function () {
  20. var test =
  21. document.getElementById('frame').contentWindow//.document.getElementById('cc');
  22. console.log(test)
  23. // test.style.background = "#333";
  24. }
  25. </script>
  26. </html>

 下面 是 输出 test 的结果

子域 window 几乎没有 有价值东西, document 根本不存在,此问题有两种方式解决

1. 放弃吧老铁, 不同源的东西,是不可进行 js 交互的

2. 利用 postMessage函数,进行子域与父域通信(前提是必须同域)

  1. var frame = document.getElementById('your-frame-id');
  2. frame.contentWindow. postMessage (data, '*');
  3. data可以是string,boolean,number,array,object
  4. 在iframe子页面
  5. window. addEventListener ('message', function(event) {
  6. //event.data获取传过来的数据
  7. });

end...


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


普通分类: