• 修改iframe内部元素的样式

    HTMLIFrameElement.contentDocument
    使用这个方法获取页面iframe中的dom对象，注意可能会有下面两种结果：

    • 如果iframe和它的父级在同一个域名下，那么这个方法返回document（是一个嵌套的浏览器上下文环境）
    • 如果iframe和它的父级不在同一个域名下，那么这个方法返回null

    有了上面的这个原则，我们就知道在不跨域的情况下我们能够更容易的修改iframe内部元素的样式，跨域情况则无法获取到iframe内部的元素，只能通过其他方式来达到目的（下面会介绍），首先来看下不跨域是怎样做的。

    不跨域修改iframe中元素的样式

    方式1：直接获取到元素修改

    1. let iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
    2.  
    3. iframeDocument.body.style.backgroundColor = "blue";
    4. // This would turn the iframe blue.

    或者参考：

    1. let iframeDocument = document.querySelector('iframe')
    2. iframeDocument.onload = function () {
    3.    let div = iframeDocument.contentWindow.document
    4.    div.getElementsByClassName('logo-img')[0].style.fontSize = '20px'
    5. }

    通过上面的操作，把iframe中body的背景色修改为“blue”

    方式2：在iframe的head中插入样式表

    1. // 页面上有一个id为i1的iframe，它嵌入的是同源的文件 child.html
    3.  
    4. // 借助jQuery在iframe加载后，向其内部插入style.css
    5. $('#i1').load(function () {
    6.  
    7.     let cssLink = document.createElement("link");
    8.     cssLink.href = "style.css";
    9.     cssLink.rel = "stylesheet";
    10.     cssLink.type = "text/css";
    11.     $('#i1')
    12.         .contents().find("head")
    13.         .append($('')
    14.     );
    15. });
    16.  
    17. // style.css
    18. body {
    19.     background-color: aqua;
    20. }

    这样我们就修改了iframe中body的背景色。

    跨域修改iframe中元素的样式

    使用到的方法如下：

    父级页面中引入了一个不同域名下的iframe，第一，需要在父级页面发送信息，第二，在iframe页面内监听并处理信息，来间接的修改样式。这是为了保证跨域通信的安全，详细内容参考 这里。

    下面介绍具体做法：
    父级页面引入了一个跨域的iframe，id为i3
     

    2.  
    3. // 在它加载完成后，执行下面的方法
    4. function load() {
    5.     console.log('loaded')
    6.     activateTheme("light");
    7. }
    8.  
    9. // 这里我们封装了一个activateTheme方法，方便后边复用，作用是修改iframe内部的主题颜色
    10. function activateTheme(theme) {
    11.     var iframe = document.getElementById("i3");
    12.     if (iframe && iframe.contentWindow) {
    13.         iframe.contentWindow.postMessage(theme, "*");
    14.     }
    15. }

    当iframe加载完成后，我们向它内部传递了activateTheme(“light”);浅色主题的消息，下面看下它内部如何接收并做出响应：

    1. // cross.html
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>childtitle>
    9.     <style>
    10.         body,
    11.         body.theme-light {
    12.             background-color: #ededed;
    13.             padding: 1rem;
    14.         }
    15.  
    16.         body.theme-dark {
    17.             background-color: #444;
    18.             color: #fff;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <script>
    24.         window.addEventListener("message",
    25.             function (event) {
    26.                 if (event.origin === window.location.origin) {
    27.                     console.log(event.data)
    28.                     document.body.classList = []
    29.                     document.body.classList.add(`theme-${event.data}`)
    30.                 }
    31.             }, false
    32.         );
    33.     script>
    34. body>
    35. html>

    可以看出，我们在接收到父级传来的消息，根据消息的内容来修改了cross.html body的背景色。并且在这里我们可以做一下是否同源的安全校验。

    到这里我们可以得出一个结论：如果你嵌入的iframe页面和父级不是同一域下，而且当你可以在iframe页面中监听事件，这样你才能修改它内部的样式，否则无法修改。

  • 相关阅读:
    springboot2.X整合mybatis使用joda时间格式变量完成插入操作
    LinkedIn领英开发客户方法大全（篇二）
    【1 操作系统概述】
    java使用phantomjs生成证书图片
    基于全息感知的智慧高速IT设施监控运维方案
    计算机网络概念入门（十一）
    Spring源码：SpringBean 的注册-XML源码解析
    【JAVA】普通IO数据拷贝次数的问题探讨
    基本排序算法
    YOLOv5训练自己的voc数据集
  • 原文地址：https://blog.csdn.net/helloxiaoliang/article/details/126865344