尝试使用 JavaScript 将 css 样式添加到 iframe

Posted 2023-05-08

【中文标题】尝试使用 JavaScript 将 css 样式添加到 iframe

【英文标题】：Trying to add css styling to iframe with JavaScript

【发布时间】：2021-01-14 03:36:14

【问题描述】：

在 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>._2p3awidth: 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>._2p3awidth: 100% !important;</style>';

试过了：Using CSS to affect div style inside iframe （所有示例都出现错误“无效”）。

我正在 iframe 上使用 onload="hello(this)" 运行此功能。

任何其他建议我可以如何编辑该类以使其宽度为 100%？？

【参考方案1】：

请尝试下面的代码......我希望你得到结果：

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

【讨论】：

得到以下错误 """land_page.js?ver=1.0:7 Uncaught DOMException: Blocked a frame with origin "localhost" from access a cross-origin frame. at hello (@987654322 @) 在 HTMLIFrameElement.onload (localhost/landing_page/:539:972)""" 我认为因为它是一个 facebook iframe DOM 阻止了我的 javascript 代码请求

是它的块，因为它不在您的来源中，但如果主题（iframe 和parrent）都在同一个域或地址中，它可以正常工作。

【参考方案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。

【讨论】：

从这个 """land_page.js?ver=1.0:9 得到以下错误未捕获的类型错误：无法读取属性 'contentDocument' of null at hello (land_page.js?ver=1.0:9)在 land_page.js?ver=1.0:16"""

@RandomCoder 确保您的 id 正确。如果是，请确保 hello 在加载 iframe 后运行。请记住，您只能在加载 DOM 之后访问 iframe 的 onload。也许这段代码可以解决你的问题：window.onload = () => document.getElementById("iframe-css").onload = hello; ; 如果这不能解决你的问题，试试这个：window.onload = hello; 如果仍然不能解决你的问题，那么除了尝试之外我不知道该告诉你什么jQuery 的$(document).ready 方法。

【参考方案3】：

决定使用不同的插件，因为使用 facebook iframe 会造成一些麻烦。有了这个新插件，一切正常。

感谢所有努力回答的人，感谢您的帮助。