Question

我有一个id =“scorm_object”的iframe。

<iframe id="scorm_object">...</iframe>

在这个iframe中，我有一个名为framewrap的类。

我正在尝试将CSS添加到此类中：

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

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

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

谢谢！

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

我现在尝试了以下内容：

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

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

但是我得到了：

 iframe is undefined

错误。

Answer 1

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

当我测试它时，等待加载事件触发固定。

使用$(window).on("load", function() {代替$(document).ready(function() {。

Answer 2

我认为这个会奏效。加载iframe后更改CSS

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

如果你想在纯JavaScript中这样做，你应该做这样的事情。创建样式元素并使用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);
});

上述方法不适用于跨域。

你看看window.postMessage

在Iframe中将DIV添加到DIV

2 个答案: