将CSS添加到Iframe中的DIV

我有一个id =“scorm_object”的iframe。将CSS添加到Iframe中的DIV

<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

错误。

来源

2017-02-15 user1525612

查看控制台。它说什么？ – Quentin

“在这个iframe里面 - 你的意思是”在文档里面，src'属性（在代码中缺少的）指向？ – Quentin

稍微混乱，但你有没有尝试过这样的事情？ http://stackoverflow.com/a/13959836/7053420 –

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

等待加载事件触发固定，当我测试它。使用$(window).on("load", function() {代替$(document).ready(function() {。

来源

2017-02-15 10:20:43 Quentin

感谢Quentin，我刚刚意识到我的一个错误是我没有包含jquery，所以需要一个纯粹的js解决方案。 – user1525612

我认为这一个将工作。如果你想这样做的纯JavaScript，你应该这样做更改CSS iframe中加载

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

后。创建一个样式元素并使用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

来源

2017-02-15 10:36:09

对不起，我没有Jquery，有更新我的问题。 – user1525612

将CSS添加到Iframe中的DIV

回答

相关问题