CSS修改iframe里面的样式详解

一、从Vue修改iframe里面的样式

1、Vue是一种流行的JavaScript框架，当我们在Vue项目中使用iframe时，可以使用Vue的特殊属性来修改iframe里面的样式。首先，需要在Vue组件的template里面添加一个带特殊属性的iframe标签，如下：

<template>
  <div>
    <iframe :src="iframeSrc" ref="iframeRef" sandbox="allow-same-origin allow-scripts"></iframe>
  </div>
</template>

2、其中，iframe的ref属性用于在Vue组件的js里面引用该iframe，sandbox属性用于设置iframe的安全策略，允许iframe来自同源域名的脚本操作iframe的内容。接下来，在Vue组件的js代码里面，使用$refs对象调用iframe，并通过iframe的window对象的document属性修改iframe里面的样式，如下：

<script>
  export default {
    data () {
      return {
        iframeSrc: 'https://www.baidu.com'
      }
    },
    mounted () {
      const iframe = this.$refs.iframeRef;
      iframe.onload = function () {
        const target = iframe.contentWindow.document.body;
        target.style.backgroundColor = 'red';
      }
    }
  }
</script>

3、实际上，修改iframe里面的样式和修改普通web页面的样式是很相似的。只需要获得iframe的window对象的document属性，然后找到需要修改的元素，使用JavaScript修改或添加样式即可。

二、如何修改iframe框内的样式

1、当我们在网站内引用iframe时，iframe会产生一个框架，有时我们需要修改该框架的样式，使其更符合网站整体风格。只需要在父页面的CSS样式表中编写以下代码，即可对iframe框内部的外边框和滚动条等进行样式修改。

iframe {
  border: 1px solid #ddd;
  padding: 10px;
  overflow: scroll;
}

2、其中，border为外边框，padding为内边距，overflow为滚动条问题。如果需要统一修改iframe样式，在父页面或者子页面的CSS里面定义即可。

三、iframe跨域修改样式

1、由于浏览器的同源策略，导致iframe跨域修改样式需特别注意。如果父页面和子页面的域名不同，那么子页面会不受控制。但是，如果我们自己搭建了一个iframe来源的服务器，那么可以在该服务器里面编写访问控制头部，使得父页面可以跨域修改子页面的样式。

2、下面是实现跨域修改子页面样式的示例代码：

// 子页面，设置CORS头部
var express = require('express');
var app = express();
app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTION');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, function() {
  console.log('Listening on port 3000...');
});

// 父页面，在iframe加载完成之后动态添加CSS样式
iframe.onload = function() {
  var target = iframe.contentWindow.document.getElementsByTagName('head')[0];
  var css = document.createElement('style');
  css.type = 'text/css';
  css.innerHTML = '.class {color: red;}';
  target.appendChild(css);
};

四、iframe修改父页面样式

1、iframe默认情况下是不允许修改父页面的CSS样式的，但有时我们需要改变父页面的样式以达到更好的用户体验。当iframe内部需要动态的改变父页面的近似元素时，我们可以使用以下代码来实现:

// 父页面，动态接收iframe传来的消息
window.addEventListener("message", function (event) {
  if (event.origin !== "your-domain-iframe.com") return;
  var data = event.data;
  var selector = data.selector;
  var style = data.style;
  document.querySelector(selector).style[style.key] = style.value;
}, false);

// iframe弹窗页面，发送数据到父页面
function iframeSendMessage() {
  var message = {
    selector: '.element',
    style: {
      key: 'background-color',
      value: 'rgb(225, 0, 0)'
    }
  };
  window.parent.postMessage(message, "http://your-domain-parent.com");
}

2、不过这种方法存在一些安全风险，因为通过iframe修改父页面样式有可能被恶意利用。

五、iframe修改子页面样式

1、修改iframe的子页面样式是比较简单的，只需要获取iframe内部的document对象，并给需要修改的元素设置新的样式即可。下面是修改iframe内部p标签的样式的示例代码：

// 父页面，获取子页面iframe的document对象，然后修改样式
var iframe = document.getElementById('my-iframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var p = innerDoc.getElementsByTagName('p')[0];
p.style.color = 'red';

2、这样可以准确地选择到iframe内部的哪个元素，从而改变样式。

六、修改iframe内部样式

1、修改iframe内部样式有两种方法。一种是使用JavaScript修改元素的style属性，另一种是使用CSS。下面是使用CSS改变iframe内部p标签样式的代码：

// 父页面，在iframe内部添加style标签，然后修改样式
var iframe = document.getElementById('my-iframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var css = 'p{color: red;}';
var style = innerDoc.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
innerDoc.getElementsByTagName('head')[0].appendChild(style);

2、使用CSS可以让代码更加简洁清晰，同时也是实现样式修改的一种常用方法。

七、iframe CSS样式没作用怎么办

1、有时候iframe里面的CSS样式不会生效，这时我们需要检查一下以下几个方面:

2、首先，检查子页面的CSS样式是否正确。如果子页面的CSS写错了，那么自然是不会生效的。

3、其次，检查父页面的CSS样式是否被iframe样式覆盖了。有时候父页面的样式会覆盖掉iframe内部的样式，需要通过调整CSS层级关系解决。

4、还有可能是因为浏览器的CSS选择器优先级问题造成的。可以使用开发者工具检查CSS优先级别。

八、结语

1、CSS修改iframe里面的样式可能存在安全隐患，需要特别注意。

2、在使用iframe时，我们需要根据不同的需求，选择合适的方式来修改其样式。有时候，需要在iframe的来源网站服务器上设置CORS头部才能跨域修改iframe里面的样式，而有时候只需要简单地修改CSS样式就可以了。

3、总之，CSS修改iframe里面的样式可以让我们更好地控制iframe的样式和行为，从而实现更好的用户体验。

原创文章，作者：AOSE，如若转载，请注明出处：https://www.506064.com/n/137840.html