Question

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

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

E.g。我拉了一个外部网站的iFrame：

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

并希望将自己的自定义CSS放在iFrame之上。

Answer 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>

（未经测试的代码）

Answer 2

如果您需要使用iframe而不是webview，则可以使用chromium-args --disable-web-security --user-data-dir禁用跨源安全性，例如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); }; {3}}）

然后理论上你可以用标准方式注入CSS＆＃34;：

{{1}}

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

2 个答案: