如何修改iframe里面的样式
一、CSS修改iframe里面的样式
要修改iframe里面的样式，最基本的方法就是使用CSS。如果iframe和父页面在同一个域中，你可以直接使用CSS选择器来修改iframe内部的样式。比如：
iframe body {
margin: 0;
padding: 0;
}
这段CSS代码会选择iframe中的body元素，并将其margin和padding设置为0。这样可以清除默认的一些间距和边距。
如果iframe和父页面不在同一个域中，就需要使用JavaScript来修改样式了。
二、修改iframe内部样式
如果你需要更加精确地修改iframe内部某一个元素的样式，可以直接在iframe内部的HTML代码里面添加style属性或者外部链接CSS文件。
比如，下面的代码会将iframe内部id为"myDiv"的元素的背景颜色设置为红色：
当然，这种方法不能修改iframe外部页面的样式。
三、Vue修改iframe里面的样式
如果你的项目中使用了Vue，你可以使用Vue的一些特性来修改iframe内部的样式。
下面是一个例子：
在这个例子中，我们通过在iframe中添加@load事件监听，来获得iframe的document对象。然后我们可以在Vue的方法中使用DOM操作来修改iframe内部的样式。
四、如何修改iframe框内的样式
修改iframe框内的样式跟修改iframe内部的样式其实是类似的。只需要在iframe内部的HTML代码里面添加一些CSS样式就可以了。
比如，下面的代码会将iframe框内所有的p元素的字体颜色设置为红色：
五、iframe修改父页面样式
有时候，我们需要通过iframe来修改父页面的样式。这种方式需要通过JavaScript来实现。
下面是一个例子：
// in iframe page
// in parent page
window.changeParentBackground = function() {
document.body.style.backgroundColor = 'red';
};
在iframe页面中，我们添加了一个按钮。当用户点击这个按钮时，会调用父页面中的changeParentBackground方法，来修改父页面的背景颜色。
六、iframe修改样式
当我们需要在多个iframe之间进行样式修改时，可以使用JavaScript中的iframe.contentWindow来获取到iframe内部的window对象，然后进行样式修改。
比如，下面的代码会将第一个iframe中的所有h1元素的字体颜色设置为红色：
const myIframe = document.getElementsByTagName('iframe')[0];
const iframeWindow = myIframe.contentWindow;
const iframeDocument = iframeWindow.document;
const h1Elements = iframeDocument.getElementsByTagName('h1');
for (let i = 0; i < h1Elements.length; i++) {
h1Elements[i].style.color = 'red';
}
在这个例子中，我们获取到了第一个iframe的window对象和document对象，然后对其中的h1元素进行样式修改。
