javascript - Chrome 应用消息传递和 'loadstop' 与 .load() 计时

Question

我正在开发一个带有 WebView 的 Chrome 应用程序。用于 WebView 的页面也可以在常规浏览器中运行。如果在 webview 中，页面会向主应用程序发送消息，但显然它们需要首先从应用程序获取消息，以便知道将消息发送到哪里。

没问题 - 主应用程序在看到“loadstop”事件后立即发送一条消息，该事件告诉页面将消息发送到何处。如果页面不在 WebView 中，那么它永远不会收到消息。

问题是，我需要知道页面何时应该停止等待消息并假设它不在 WebView 中。

相对于页面中的事件(例如 jQuery 的 .ready 或 .load)，“loadstop”何时发生？有没有办法捕获或触发在主应用程序中可能会看到“loadstop”以及由 webview 的 JavaScript 发送和接收的消息之后保证发生的事件。

Answer 1

When does 'loadstop' occur, relative to events in the page such as jQuery's .ready or .load?

根据 loadstop 的文档事件:

Fired when all frame-level loads in a guest page (including all its subframes) have completed. This includes navigation within the current document as well as subframe document-level loads, but does not include asynchronous resource loads.

这表明它更类似于 jQuery 的 .ready() ，它在 DOM 树加载之后、等待资源(.css、.js)下载之前执行。

密切关注该文档页面；自两周前以来，它已经有了很大的改善。

<小时/>

Is there a way to trap or trigger an event guaranteed to occur after 'loadstop' MIGHT be seen in the main App and a message sent and received by the webview's JavaScript?

您的 manifest.json 声明您的 my-app-main.js 后台脚本(以及您的 webview 权限)，该脚本启动您的 my-webview-wrapper。 html 其中包括您的 <webview>标记并内联一些 javascript(或来源 my-webview-wrapper.js 文件)，通过 onload 将事件监听器分配给您的 webview功能如下:

onload = function() {
  webview = document.getElementById("the-id-attribute-of-my-webview");
  webview.addEventListener("<EVENT>", function() {
    // the cool stuff you want to do
  }
}

<EVENT>可以是我链接的文档中列出的任何 webview DOM 事件(包括 loadstop )。您的主应用程序不应该真正关心这一切的发生。 (它是异步的!它是 javascript!它是神奇的!)

如果您仍然感到困惑，只需浏览 Google 的 webview sample在 GitHub 上。