Question

我正在尝试加载iframe，并在加载后向其注入我的自定义css样式。但是当我加载页面时，我看到我的css样式暂时出现，然后最终加载的iframe覆盖了我的样式并且它消失了。

我知道，我需要等到装入iframe，我试图这样做但没有任何成功。

当我在执行以下代码行后停止调试器时，我可以看到背景更改。但随后它就消失了。

.append('<style> body{background:red;}</style>');

查看代码段。

 (function(){
            var iFrame = $('iframe');
            var contents = iFrame.contents();
            var styleTag = contents.find('head').append('<style> body{background:red;}</style>'); 
        })();

#my-iframe {
            width: 100%;
            height: 600px;
        }
        
        #middle-container {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        #iframe-container {
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>iFrame Test Page</title>
</head>

<body>
    <div id="middle-container">
        <div id="iframe-container">
            <iframe id="my-iframe"       src="http://www.w3schools.com">
                <p>Sorry! Your browser doesn't support iFrames</p>
            </iframe>
        </div>
    </div>
</body>

</html>

Answer 1

实际上你的代码是正确的。但是，由于您尝试修改外部资源的内容，因此内容永远不会更改并保持更改。浏览器中的跨站点脚本（安全）规则阻止您实现此目的。

编辑iframe内容的唯一方法是替换iframe的全部内容。

示例：

$('iframe').load(function() {
  $('iframe').replaceWith('<p>Replacing everything!</p>');
});

然而它似乎毫无意义。

Answer 2

为什么不使用jQuery来改变颜色：

https://jsfiddle.net/9vzj7qt8/

 (function(){
            var iFrame = $('iframe');
            var contents = iFrame.contents();
            var styleTag = contents.find('body').css("background-color","red"); 
        })();

iframe在加载时会覆盖我的自定义css

2 个答案: