如何修改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"的元素的背景颜色设置为红色：



  <html>
    <head>
      <style>
        #myDiv {
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div id="myDiv">This is my div</div>
    </body>
  </html>



当然，这种方法不能修改iframe外部页面的样式。

三、Vue修改iframe里面的样式

如果你的项目中使用了Vue，你可以使用Vue的一些特性来修改iframe内部的样式。

下面是一个例子：







在这个例子中，我们通过在iframe中添加@load事件监听，来获得iframe的document对象。然后我们可以在Vue的方法中使用DOM操作来修改iframe内部的样式。

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

修改iframe框内的样式跟修改iframe内部的样式其实是类似的。只需要在iframe内部的HTML代码里面添加一些CSS样式就可以了。

比如，下面的代码会将iframe框内所有的p元素的字体颜色设置为红色：



  <html>
    <head>
      <style>
        p {
          color: red;
        }
      </style>
    </head>
    <body>
      <p style="text-indent: 2em;">This is a paragraph.</p>
    </body>
  </html>



五、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元素进行样式修改。