NW.js - webview - 角度未定义错误答案

【问题标题】：NW.js - webview - Angular is not defined errorNW.js - webview - 角度未定义错误
【发布时间】：2017-10-13 17:57:45
【问题描述】：

我想使用 NW.js 和 webview 控制外部网站，但每当我尝试这个时，我都会遇到错误 - 未定义 Angular。

我的来源：

index.html

html...head...body...
<webview id="webview" name="webview" src="https://google.com/" allownw></webview>
<script src="../js/script.js"></script>
...body...html

script.js

(function() {
var gui = require('nw.gui');
var win = gui.Window.get();
var webview = document.getElementById("webview");

var tray = new gui.Tray({
    icon : 'assets/icon.png'
});

var menu = new gui.Menu();

menu.append(new gui.MenuItem({
    type: 'normal',
    label: '▶️ Play',
    click: function() {
        webview.executeScript({code:"var player=angular.element(document.body).injector().get('player'); player.play();"});
    }
}));
tray.menu = menu;

}());

此代码为我产生错误：ReferenceError: angular is not defined

注意：网站 google.com 仅为示例。

【问题讨论】：

标签： angularjs webview nw.js

【解决方案1】：

来自nw.jsdocs：

在 webview 中加载本地文件

在清单中添加以下权限：

  "webview": {
     "partitions": [
        {
          "name": "trusted",
          "accessible_resources": [ "<all_urls>" ]
        }
     ]
  }

并将 'partition="trusted"' 属性添加到 webview 标签。

这是<script 标签无法访问您的../js/script.js 文件的原因之一。我还建议使用本地文件示例的非相对路径：chrome-extension://yourdomain/js/script.js（并且它是相对于根目录而不是“向上”目录）。

从google的docs，您可以将accessible_resources设置为特定的模式或文件。

您可能会对来自 google 文档的insertCss、setUserAgentOverride、permissionrequest 事件，尤其是executeScript 感兴趣。

注意：您可能不想让该 webview 访问您的 nwjs 上下文 (allownw)，因为它可以访问您的程序可以访问的任何内容。对于外部 URL 和 http 尤其如此，其中 MITM 篡改或第三方更改可能会导致某人获得对运行您的应用程序的 PC 的更高访问权限。

对于您的示例，我会将 script.js 保留在 webview 之外，并让它通过脚本注入来检测 webview。

【讨论】：