Question

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>

<iframe src="demo_iframe.htm" id='frameID' height="200" width="300"></iframe>
<script>
$(document).ready(function(){
    var iFrameDOM = $("iframe#frameID").contents();

    iFrameDOM.find("body").css("background-color", "blue!important");
});
</script>
</body>
</html>

我正在尝试改变iframe中身体的背景颜色，它根本不起作用。这取自w3schools ...运行并检查。

Answer 1

当您调用其内容时，iframe可能尚未加载。所以在iframe加载之后做的工作。有两种方法。首先，您可以删除!important，它会正常工作。

第一路：

$(function(){
    var $iframe = $("iframe#frameID");
    $iframe.on('load', function(){
        var iFrameDOM = $iframe.contents();
        iFrameDOM.find("body").css("background-color", "blue");
    });
});

第二路： 但是如果您需要添加!important，则必须使用类来执行此操作：

$(function(){
    var $iframe = $("iframe#frameID");
    $iframe.on('load', function(){
        var iFrameDOM = $iframe.contents(); 

        iFrameDOM.find("head").append($("<style type='text/css'>  .bodyBg{background-color:blue!important;}  </style>"));

        iFrameDOM.find("body").addClass('bodyBg');
    });
});

额外信息： 下面的代码可能无法在某些IE版本上运行，您可能无法选择正文：

var iFrameDOM = $iframe.contents(); 
var $body = iFrameDOM.find("body");

要传递此信息，只需执行以下操作：

将名称属性添加到iframe：

<iframe src="demo_iframe.htm" name="frameName" id='frameID' height="200" width="300"></iframe>

使用以下代码选择正文：

var body = window.frameName.document.getElementsByTagName("body")[0];
var $body = $(body);

Answer 2

试试这个：

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

无法使用jQuery

2 个答案: