一、从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的样式和行为，从而实现更好的用户体验。
