Javascript 将CSS添加到Iframe中的DIV

我有一个id为“scorm\u object”的Iframe

但我似乎无法让它发挥作用

我知道这里有多个iframe示例，但我真的在寻找一些好的和简单的东西

谢谢

更新：抱歉，我必须在没有jquery的情况下完成这项工作

我现在尝试了以下方法：

  var iframe = document.getElementsByTagName('iframe')[0];
  iframe.addEventListener("load", function() {

      window.frames[0].document.body.style.backgroundColor = "#fff";
  });

但我得到了：

 iframe is undefined

---

错误。

当父文档的DOM就绪时，您正在启动JavaScript。这可能发生在框架中的文档准备就绪之前

等待加载事件触发修复了我测试它时的问题

---

使用

$（窗口）。在（“加载”时，使用function（）{

而不是

$（文档）。ready（function（）{

我认为这一个会起作用。加载iframe后更改CSS

$('#scorm_object').load(function() {
  $('#scorm_object').contents().find('.framewrap').css('opacity','.2');
});

如果你想在纯javascript中实现这一点，你应该这样做。创建一个style元素，使用textContent属性添加必要的样式，并将该样式添加到iframe中

var iFrame = document.getElementById("scorm_object");
var style = document.createElement("style");
style.textContent =
  '#framewrap{' +
  '  opacity: 0.2;' +
  '}' +
  'h1 {' +
  '  color: green;' +
  '}' 
;
iFrame.addEventListener ("load", function () {
    iframe.contentDocument.head.appendChild(style);
});

上述方法不适用于跨域

---

您可以查看一下

查看浏览器开发工具中的控制台。控制台上写的是什么？“在这个iframe中-您的意思是”在文档中，

src

属性（问题中的代码中缺少该属性）指向？有点混乱，但是你尝试过这样的东西吗？@Quentin是的，在src htmlIs中，源跨域？因为如果是的，那么你可能会因为iframesthank Quentin的安全沙箱而挣扎，我刚刚意识到我的一个错误是我没有包含jquery，所以需要一个纯js解决方案。

$('#scorm_object').load(function() {
  $('#scorm_object').contents().find('.framewrap').css('opacity','.2');
});

var iFrame = document.getElementById("scorm_object");
var style = document.createElement("style");
style.textContent =
  '#framewrap{' +
  '  opacity: 0.2;' +
  '}' +
  'h1 {' +
  '  color: green;' +
  '}' 
;
iFrame.addEventListener ("load", function () {
    iframe.contentDocument.head.appendChild(style);
});