如何将CSS注入Node Webkit中的iFrame中？
[英]How to inject CSS into an iFrame in Node Webkit?
问题描述
I'm working on a small mac app version of a web app using nw.js and want to style it to look more "mac-app" like: How would I inject custom CSS into the iFrame that loads the app? 
我正在使用nw.js开发Web应用程序的小型mac应用程序版本，并希望对其进行样式设置，使其看起来更像“ mac-app”，例如：如何将自定义CSS注入到加载应用程序的iFrame中？
I've tried the standard way but it doesn't work because they're from different domains. 我已经尝试过标准方式，但是它不起作用，因为它们来自不同的域。
Eg I pull in an iFrame of an external website: 例如，我拉入外部网站的iFrame：
<body>
<iframe id="app" src="https://example.com" nwdisable nwfaketop>
</iframe>
</body>
and want to put my own custom CSS on top of the iFrame. 并希望将自己的自定义CSS放在iFrame之上。
2 个解决方案
解决方案1
0 2015-04-20 04:33:58
Use a <webview> instead. 请使用<webview> 。 It comes from chrome and is documented there . 它来自chrome，并在那里记录 。
<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>
(Untested code) （未经测试的代码）
解决方案2
0 2016-12-11 07:20:36
If you need to use an iframe and not a webview , you may be able to disable the cross-origin security with chromium-args such as --disable-web-security --user-data-dir (from here ) 如果您需要使用iframe而不是webview ，则可以使用chromium-args禁用跨域安全性，例如--disable-web-security --user-data-dir （从此处开始 ）
Then you could theoretically inject CSS in the "standard way": 然后，您可以从理论上以“标准方式”注入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);
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.