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的樣式和行為，從而實現更好的用戶體驗。