有一个很棒的脚本可以用节点本身的iframe版本替换节点。 CodePen演示

使用例子:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

我找到了另一个解决方案，把样式放在主html像这样

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

然后在iframe中这样做(参见js的onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

在js中

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

这可能不是最好的解决方案，当然也可以改进，但如果您想在父窗口中保留“style”标签，这是另一种选择

这就是我在生产中所做的。值得记住的是，如果iframe属于其他网站，它将触发CORS错误，将无法工作。

    var $iframe =  document.querySelector(`iframe`);
    var doc = $iframe.contentDocument;

    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);

在某些情况下，你可能还想给iframe附加一个load事件:

var $iframe =  document.querySelector(`iframe`);

$iframe.addEventListener("load", function() {
    var doc = $iframe.contentDocument;
    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);
});

我的精简版:

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

然而，有时iframe在窗口加载时还没有准备好，因此需要使用计时器。

现成的代码(带计时器):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

.．.jQuery链接:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

我认为最简单的方法是添加另一个div，在相同的地方iframe，然后

使它的z-index大于iframe容器，所以你可以很容易地只是样式你自己的div。如果你需要点击它，只需使用指针事件:没有在你自己的div，所以iframe将工作，以防你需要点击它;)

我希望它能帮助到别人;)

我们可以在iframe中插入样式标签。

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>