检查 NW.js 中 WebKit 上下文何时可用

Question

在节点上下文中执行时 (node-main)，

setTimeout(function () {
    console.log(nw);
}, 20);

投掷

nw is not defined

因为 WebKit 上下文还没有准备好（从一开始 window 在 NW.js <= 0.12 中不可用，window.nw 在 NW.js >= 0.13 中不可用。并且

setTimeout(function () {
    console.log(nw);
}, 200);

工作得很好，但 setTimeout 看起来像一个 hack，将其设置为安全延迟值可能会导致不希望的延迟。

如何从 Node 上下文中检查 WebKit 上下文和 nw 的可用性？有没有合理的方式，比如可以处理的事件？

Answer 1

下面实现了同样的事情，但相反。

在您的 html 文件中：

<body onload="process.mainModule.exports.init()">

在您的节点主 JS 文件中：

exports.init = function() { console.log(nw); }

此处，init函数仅在Webkitcontext/DOM可用时调用。

Answer 2

您可以使用 pollit :) ...

var pit = require("pollit");
foo = function(data) {
  console.log(nw);
};
pit.nw('nw', foo);

我已经测试过了，它对我有用:)。这模块化了我在接近尾声时给出的解决方案。

nw 对象不存在，直到 webkit 启动并且运行即浏览器 window 已创建。这发生在 Node 启动之后，这就是为什么你收到此错误。要使用 nw api 您可以创建事件听取或调用全局函数前者更可取。下面的代码将演示两者，并且应该让您很好地了解 Node 和 WebKit 是如何相互连接的。

此示例创建一个 Window，打开 devtools 并允许您切换屏幕。它还在控制台中显示鼠标位置。它还演示了如何使用 DOM 发送事件，即 body.onclick() 并从 Node 中附加事件，即我们将捕获 minimize 事件并将它们写入控制台。

为此，您需要使用 NW 的 SDK 版本。这是我的 package.json

{
  "name": "hello",
  "node-main": "index.js",
  "main": "index.html",
  "window": {
    "toolbar": true,
    "width": 800,
    "height": 600
  },
  "dependencies" : {
    "robotjs" : "*",
    "markdown" : "*"
  }
}

您需要的两个文件是index.html

<!DOCTYPE html>
<html>
  <head>
    <script>
      var win = nw.Window.get();
      global.win = win;
      global.console = console;
      global.main(nw);
      global.mouse();
      var markdown = require('markdown').markdown;
      document.write(markdown.toHTML("-->Click between the arrows to toggle full screen<---"));
    </script>
  </head>
  <body onclick="global.mouse();">
  </body>
</html>

和index.js.

var robot = require("robotjs");

global.mouse = function() {
  var mouse = robot.getMousePos();
  console.log("Mouse is at x:" + mouse.x + " y:" + mouse.y);
  global.win.toggleFullscreen();
}

global.main = function(nw_passed_in) {
  global.win.showDevTools();
  console.log("Starting main");
  console.log(nw_passed_in);
  console.log(nw);
  global.win.on('minimize', function() {
    console.log('n: Window is minimized from Node');
  });
}

当运行这个我用了

nwjs --enable-logging --remote-debugging-port=1729  ./

然后您可以使用

打开浏览器

http://localhost:1729/

在需要时进行调试。

如果您想在 nw 对象存在时立即执行某些操作，您可以轮询它。我会使用 eventEmitter，如果您不想使用事件发射器，您可以轻松地将它包装在一个函数中并递归调用它。以下将显示在设置 nw 对象之前花费了多少毫秒。在我的系统上，这介于 43 - 48 毫秒之间。使用递归函数也不例外。如果将此添加到上面的代码中，您将看到所有内容都记录到控制台。

var start = new Date().getTime();
var events = require('events');
var e = new events.EventEmitter();

var stop = 0;
e.on('foo', function() { 
if(typeof nw === 'undefined') {
  setTimeout(function () {
    e.emit('is_nw_defined');
  }, 1); 
 }   
 else {
   if(stop === 0) {
     stop = new Date().getTime();
   }   
   setTimeout(function () {
     console.log(stop - start);
     console.log(nw);
     e.emit('is_nw_defined');
   }, 2000);
 }   
});
e.emit('is_nw_defined');

Answer 3

解决方案 1：

您可以使用 onload、see reference。

main.js:

var gui = require("nw.gui"),
    win = gui.Window.get();

onload = function() {
    console.log("loaded");
    console.log(win.nw);
};

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body></body>
</html>

package.json:

{
  "name": "Freebox",
  "main": "index.html"
}

解决方案 2：

（为了防止问题，但没有必要）。

var gui = require("nw.gui"),
    win = gui.Window.get();

onload = function() {
    console.log("loaded");
    var a = function () {
        if (!win.nw) return setTimeout(a, 10);
        console.log(win.nw);
    };
};

Answer 4

我最初提出的解决方案看起来像

app-node.js

process.once('webkit', () => {
    console.log(nw);
});

app.html

<html>
<head>
    <script>
        global.process.emit('webkit');
    </script>
    ...

我很高兴知道已经有一个事件可以监听，因此跨平台客户端脚本可以省略与 NW 相关的代码。

检查 NW.js 中 WebKit 上下文何时可用

Check when WebKit context is available in NW.js

node.js

node-webkit

nw.js

解决方案 1：

解决方案 2：