如何将 CSS 注入 Node Webkit 中的 iFrame？答案

【问题标题】：How to inject CSS into an iFrame in Node Webkit?如何将 CSS 注入 Node Webkit 中的 iFrame？
【发布时间】：2015-04-12 00:12:25
【问题描述】：

我正在开发一个使用 nw.js 的 Web 应用程序的小型 Mac 应用程序版本，并希望将其样式设置为看起来更像“mac-app”：如何将自定义 CSS 注入加载应用程序的 iFrame 中？

我尝试了标准方法，但它不起作用，因为它们来自不同的域。

例如我拉入一个外部网站的 iFrame：

<body>
<iframe id="app" src="https://example.com" nwdisable nwfaketop>
</iframe>
</body>

并且想将我自己的自定义 CSS 放在 iFrame 之上。

【问题讨论】：

从外部使用postMessage()，从内部使用addEventListener("message")。
请添加一些代码来支持您的问题和更多解释！

标签： javascript node-webkit nw.js

【解决方案1】：

请改用<webview>。它来自chrome，是documented there。

<body>
    <webview id="app" src="https://example.com"></webview>
</body>
<script>
    var wv = document.getElementById("app");
    wv.addEventListener("loadcommit", function(e){
        wv.insertCSS({code: "style {  }"}); // or...
        wv.insertCSS({file: "styles.css"});
    });
</script>

（未经测试的代码）

【讨论】：

【解决方案2】：

如果您需要使用iframe 而不是webview，您可以使用chromium-args 禁用跨域安全性，例如--disable-web-security --user-data-dir（来自here）

那么理论上你可以以“标准方式”注入 CSS：

var iframe = document.querySelector("iframe");
iframe.onload = function(){
    var doc = iframe.contentDocument;
    var style = doc.createElement("style");
    style.type = "text/css";
    style.appendChild(doc.createTextNode(css));
    doc.head.appendChild(style);
};

【讨论】：