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

我正在尝试加载iframe，加载后将我的自定义css样式注入其中。但是当我加载页面时，我看到我的css样式出现了一瞬间，然后最后加载的iframe覆盖了我的样式，它消失了

我知道，我需要等待iframe加载，我尝试过这样做，但没有成功

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

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

iFrame测试页
对不起！您的浏览器不支持iFrame

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

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

例如：

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

$（'iframe'）.load（函数（）{
$（'iframe'）。替换为（'替换所有内容！
'）；
});

---

但是这似乎毫无意义。

为什么不使用jQuery来更改颜色，如下所示：

---

你试过给予吗！重要的css样式？

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