<webview> 标签

<webview> 标签
- 概要
- 参考

使用 <webview> 标签在您的应用中嵌入“访客”内容（例如网页）。与 <iframe> 不同，<webview> 在与您的应用不同的进程中运行；它没有与您的应用相同的权限，并且您的应用与嵌入内容之间的所有交互都是异步的。这可以保护您的应用免受嵌入内容的攻击。

概要

要将网页嵌入您的应用，请将 webview 标签添加到您的应用的嵌入页面（这是将显示访客内容的应用页面）。在最简单的形式中，webview 标签包含网页的 src 和控制 webview 容器外观的 css 样式。

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>

参考

有关详细的 API 参考，请参阅 Chrome 的 <webview> 标签文档。

除了上游 API 之外，NW.js 还添加了以下方法

webview.showDevTools(show, [container])

show {boolean} 标志：打开或关闭开发者工具窗口
container {webview Element} 可选用于显示开发者工具的 <webview> 元素。默认情况下，开发者工具会以新窗口显示。

开发者工具扩展可以在嵌入式 webview 中使用。只需使用 --load-extensions 加载它们即可。应通过在扩展的 manifest.json 中添加一个额外的 webview 部分并将 partition='trusted' 属性添加到 webview 标签来使容器 webview 可信。请参阅问题 #6004 中的示例。

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

webview.inspectElementAt(x, y)

使用 webview.showDevTools() 打开开发者工具后，可以调用此函数来检查位于 (x, y) 处的元素。

在 webview 中加载本地文件

在清单中添加以下权限

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

并将 ‘partition=”trusted”’ 属性添加到 webview 标签。

webview 中的 Node.js 支持

要在 WebView 中启用 Node.js 支持，请将 allownw 属性添加到 webview 标签。然后，无论加载本地文件还是远程站点，Node.js 都会被启用。请谨慎使用此功能，因为 webview 通常应该加载不可信内容。

在主世界中执行脚本

Chrome 中的 executeScript 函数允许您将 JS 代码注入 webview，但在隔离的世界中。要访问目标 DOM 上下文中的 JS 对象，您可以将代码注入主世界上下文。只需将 {mainWorld: true} 添加到函数的 InjectDetails 类型参数即可。

webview 中的 Cookies 支持

WebView 具有 ‘getCookieStoreId()’ 函数，该函数返回可以在 chrome.cookies API 中使用的 storeId。

控制台中的示例

假设您有一个带有 webview 的简单 NW.js 应用程序。

在控制台中显示例如 https://docs.nw.js.cn 的所有 cookie（要获得一些 cookie，您需要先访问页面）。

chrome.cookies.getAll({url:"https://docs.nw.js.cn", storeId:webview.getCookieStoreId()}, console.log.bind(console));