嘗試使用 JavaScript 向 iframe 添加 css 樣式

Question

在 Wordpress 上試試這個：

在我的iframe我有一個._2p3a類，我想將其寬度更改為._2p3a {width: 100% !important;} 。

使用 CSS 無法訪問該類，因此我正在嘗試使用 JavaScript：

我的JS代碼：

function hello() {
   let myiFrame = document.getElementById("iframe-css");
   let doc = myiFrame.contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';
}

//the iframe id > "iframe-css"

代碼來源： https : //redstapler.co/how-to-apply-css-to-iframe/

錯誤：

land_page.js?ver=1.0:4 Uncaught TypeError: Cannot read property 'body' of null
    at hello (land_page.js?ver=1.0:4)
    at HTMLIFrameElement.onload ((index):539)

下划線代碼：

.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';

嘗試過： 使用 CSS 影響 iframe 內的 div 樣式（所有示例都出現錯誤“無工作”）。

我在 iframe 上使用onload="hello(this)"運行此函數。

任何其他建議如何編輯該類以使其寬度為 100%？

Answer 1

請嘗試以下代碼......我希望你得到結果：

let myiFrame = document.getElementById("iframe-css").contentWindow;
let doc = myiFrame.document;
doc.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';

Answer 2

添加<style>元素並不是執行此操作的最佳方法。 但是，即使是這樣，您也應該盡量避免通過innerHTML添加元素。 這是更好地使用Document.createElement （ document是一個實例Document ）和Element.appendChild （所有元素都是實例Element類）。

最好的方法是直接修改類中元素的樣式。

function hello() {
  let myiFrame = document.getElementById("iframe-css");
  let doc = myiFrame.contentDocument ?? myiFrame.contentWindow?.document ?? new Document();
  let elements = doc.getElementsByClassName("2p3a");
  for(let i = 0; i < elements.length; ++i) {
    elements[i].style.width = "100%";
  }
}

此外， onload屬性有時不適用於 iFrame。 您可能必須像這樣使用 DOM：

document.getElementById("iframe-css").onload = hello;

附帶說明一下，您通常應該在 JavaScript 中堅持使用 2 或 4 個縮進空格，但您選擇了 3。

Answer 3

決定使用不同的插件，因為使用 facebook iframe 會引起一些麻煩。 有了這個新插件，一切正常，所以是的。

感謝任何努力回答的人，感謝您的幫助。