NW.js项目中的webview标签详解与应用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01040/article/details/148325410

NW.js项目中的webview标签详解与应用指南

nw.js Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies. 项目地址: https://gitcode.com/gh_mirrors/nw/nw.js

前言

在NW.js（原Node-Webkit）项目中，<webview>标签是一个强大而特殊的组件，它允许开发者在应用程序中嵌入外部网页内容。本文将全面解析这个标签的特性、使用方法以及NW.js特有的扩展功能，帮助开发者更好地利用这一功能构建混合应用。

webview标签基础概念

与iframe的区别

<webview>标签与传统的<iframe>有本质区别：

进程隔离：webview运行在独立的进程中，与宿主应用隔离
权限控制：webview不具备宿主应用的权限
异步交互：所有交互都是异步进行的
安全性：这种设计保护宿主应用免受嵌入内容的影响

基本用法

最简单的webview使用方式如下：

<webview id="webview1" src="https://example.com" style="width:800px; height:600px"></webview>

NW.js特有的扩展功能

开发者工具集成

NW.js为webview添加了开发者工具支持：

// 在新窗口中打开开发者工具
document.getElementById('webview1').showDevTools(true);

// 在指定webview容器中显示开发者工具
document.getElementById('webview1').showDevTools(true, containerElement);

开发者工具扩展支持

要在webview中使用开发者工具扩展，需要：

启动时加载扩展：--load-extensions
在manifest.json中添加配置：

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

为webview标签添加属性：partition="trusted"

元素检查功能

打开开发者工具后，可以检查特定坐标位置的元素：

webview.inspectElementAt(100, 150);

本地文件加载

要在webview中加载本地文件，需要：

在manifest.json中添加权限：

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

为webview标签添加属性：partition="trusted"

Node.js集成

在webview中启用Node.js支持（需谨慎使用）：

<webview allownw src="https://example.com"></webview>

启用后，无论加载本地文件还是远程站点，都将具备Node.js能力。

高级功能

主世界脚本注入

与Chrome的默认行为不同，NW.js允许将脚本注入到主世界上下文：

webview.executeScript({
  code: 'document.title',
  mainWorld: true
}, function(result) {
  console.log(result);
});

Cookie管理

webview提供了cookie管理功能：

// 获取cookie存储ID
const storeId = webview.getCookieStoreId();

// 查询特定URL的所有cookie
chrome.cookies.getAll({
  url: "http://example.com",
  storeId: storeId
}, function(cookies) {
  console.log(cookies);
});