nativescript-webview-plus

为 NativeScript 扩展 WebView 功能，增加许多选项。代码最初基于 nativescript-webview-plus

特性

为 webview 添加自定义方案处理器 x-local://，以在 webview 内加载资源。
- 注意：对于 iOS 11+ 使用 WKWebView，对于 iOS <11 使用 UIWebView
添加了捕获 URL 的支持。
- 这允许应用在外部浏览器中打开外部链接并处理 tel 链接
添加了以下功能
- executeJavaScript(code: string) 用于执行 JavaScript 代码并获取结果。
- executePromise(code: string) 用于调用 promises 并获取结果。
- getTitle() 返回 document.title。
在 NativeScript 和 WebView 之间添加双向事件监听器
- 从 NativeScript 到 WebView
- 从 WebView 到 NativeScript
添加了注入 css 和 javascript 文件的功能。
- 到当前页面。
- 在页面加载时自动注入。
polyfills
- Promise
- Fetch API（在 Android 上覆盖原生 API 以支持 x-local:// 和 file://）
允许使用 WkWebView 的 alert、confirm 和 prompt。
支持
- Android 19+
- iOS 9+

安装

描述您的插件安装步骤。理想情况下，它应该是这样的

tns plugin add @nota/nativescript-advanced-werbview

Angular 支持

从 nativescript-webview-plus/angular 导入 AWebViewModule 并将其添加到您的 NgModule 中。

这注册了 AWebView 元素。用替换标签

Vue 支持

在您的应用入口文件（可能是 app.js 或 main.js）中导入 nativescript-webview-plus/vue。

这注册了 AWebView 元素。用替换标签

使用

限制

为了截取自定义方案请求，我们使用 iOS 9 和 10 的 UIWebView 和 iOS 11+ 的 WKWebView。

iOS 11 添加了对在 WKWebView 上设置 WKURLSchemeHandler 的支持。在 iOS 11 之前，没有对使用 WKWebView 截取 URL 的支持，因此我们使用自定义 NSURLProtocol + UIWebView。

重要

与 UIWebView 一起使用的自定义 NSURLProtocol 在所有 AWebView 实例之间共享，因此 x-local://local-filename.js > file://app/full/path/local-filename.js 之间的映射在它们之间是共享的。

API

NativeScript 视图

属性	值	描述
readonly isUIWebView	true / false	原生动命 WebView 是 UIWebView？如果 `iOS <11` 则为 true
readonly isWkWebView	true / false	原生动命 WebView 是 WKWebView？如果 `iOS >=11` 则为 true
src		加载 src
autoInjectJSBridge	true / false	是否应在 `loadFinishedEvent` 上注入 window.nsWebViewBridge？默认为 true
builtInZoomControls	true / false	Android：是否使用内置的缩放机制
cacheMode	默认 / no_cache / cache_first / cache_only	Android：设置缓存模式。
databaseStorage	true / false	Android：启用/禁用数据库存储 API。注意：它会影响进程中的所有 WebView。
debugMode	true / false	Android：启用 Android 上 WebView 的 Chrome 调试器。注意：适用于应用程序中的所有 WebView。
displayZoomControls	true / false	Android：在使用内置缩放机制时显示屏幕上的缩放控件
domStorage	true / false	Android: 启用/禁用DOM存储API。例如localStorage
scalesPageToFit	UIWebView: 页面是否应该缩放以适应视图？默认为false
scrollBounce	true / false	iOS: scrollView是否应该弹跳？默认为true。
supportZoom	true / false	Android: webview是否支持缩放
viewPortSize	false / view-port字符串 / ViewPortProperties	在加载完成时设置viewport元数据。注意：WkWebView默认将initial-scale设置为1.0。

函数	描述
loadUrl(src: string): Promise	打开一个URL，并在加载完成后解析一个Promise。
registerLocalResource(resourceName: string, path: string): void;	将"x-local://{resourceName}"映射为"{path}"。
unregisterLocalResource(resourceName: string): void;	从"x-local://{resourceName}"映射为"{path}"中移除映射
getRegisteredLocalResource(resourceName: string): void;	获取从"x-local://{resourceName}"映射为"{path}"的映射
loadJavaScriptFile(scriptName: string, filepath: string)	将javascript-file注入到webview中。应该在`loadFinishedEvent`之后调用
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean)	将CSS文件加载到document.head中。如果before为true，则将其添加到document.head的顶部，否则作为最后一个元素
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[])	将多个javascript-files注入到webview中。应该在`loadFinishedEvent`之后调用
loadStyleSheetFiles(files: {resourceName: string, filepath: string, insertBefore: boolean}[])	将多个CSS文件加载到document.head中。如果before为true，则将其添加到document.head的顶部，否则作为最后一个元素
autoLoadJavaScriptFile(resourceName: string, filepath: string)	注册一个JavaScript文件在`loadFinishedEvent`时注入。如果页面已经加载，脚本将注入到当前页面。
autoLoadStyleSheetFile(resourceName: string, filepath: string, insertBefore?: boolean)	注册一个CSS文件在`loadFinishedEvent`时注入。如果页面已经加载，CSS文件将注入到当前页面。
autoExecuteJavaScript(scriptCode: string, name: string)	在`loadFinishedEvent`上执行一个脚本。脚本可以是一个Promise
executeJavaScript(scriptCode: string)	在网页中执行JavaScript。注意：scriptCode应该是ES5兼容的，否则可能在'iOS < 11'上无法工作
executePromise(scriptCode: string, timeout: number = 500)	在webview中运行一个promise。注意：执行scriptCode必须返回一个promise。
emitToWebView(eventName: string, data: any)	向webview发出一个事件。注意：data必须可以通过JSON.stringify进行字符串化，否则会抛出异常。
getTitle()	返回一个包含当前文档标题的Promise。

事件

事件	描述
loadFinished	在发生loadFinished事件时被触发。args是一个`LoadFinishedEventData`
loadProgress	Android仅：在页面加载期间触发，以指示进度。args是一个`LoadProgressEventData`
loadStarted	在发生loadStarted事件时被触发。args是一个`LoadStartedEventData`
shouldOverrideUrlLoading	在webview请求URL之前触发。可以通过在`ShouldOverrideUrlLoadEventData`中设置args.cancel = true来取消
titleChanged	文档标题已更改
webAlert	当在webview内部触发`window.alert`时被触发，需要使用自定义对话框来处理web警报。args在`WebAlertEventData`中。必须调用`args.callback()`以指示警报已关闭。注意：UIWebView不支持
webConfirm	当在webview内部触发`window.confirm`时被触发，需要使用自定义对话框来处理web确认框。args在`webConfirmEvent`中。必须调用`args.callback(boolean)`以指示确认框已关闭。注意：UIWebView不支持
webConsole	仅限Android：当行被添加到Web控制台时触发。args是`WebConsoleEventData`。
webPrompt	当在webview内部触发`window.prompt`时触发，需要使用自定义对话框进行web提示框。args在`webConfirmEvent`中。`args.callback(string
webview发出的事件	当在webview内部调用nsWebViewBridge.emit(...)时触发。args在`WebViewEventData`

WebView

在WebView内部，我们有nsWebViewBridge用于在NativeScript-层和WebView之间发送事件。**注意**：该桥接器仅在WebView内部的DOMContentLoaded或onload时可用。

函数	描述
window.nsWebViewBridge.on(eventName: string, cb: (data: any) => void)	注册来自本地层的事件处理程序。
window.nsWebViewBridge.off(eventName: string, cb?: (data: any) => void)	取消注册来自本地层的事件处理程序。
window.nsWebViewBridge.emit(eventName: string, data: any)	向NativeScript层发出事件。将在AWebView上作为其他事件发出，数据将是WebViewEventData对象的组成部分

可能出现的功能

cookie助手？
设置视口元数据？
与本地层共享缓存？

Android

设置
- AppCache？
- 用户代理？

iOS

设置？

演示和单元测试

运行演示

要运行演示项目，必须在本地构建插件并运行http服务器。

运行演示的最简单方法是按照以下步骤操作

从https://github.com/Notalib/nativescript-webview-plus.git克隆git存储库
进入src文件夹
使用npm脚本
- npm run demo.ios
- npm run demo.android

运行单元测试

从https://github.com/Notalib/nativescript-webview-plus.git克隆git存储库
进入src文件夹
使用npm脚本
- npm run test.ios
- npm run test.android

许可证

Apache许可证版本2.0，2004年1月

关于Nota

Nota是丹麦的图书馆和专门为有印刷障碍的人提供专家中心。要成为Nota的成员，您必须能够证明您无法阅读普通印刷文本。Nota的成员是视力障碍者、阅读障碍者或其他人。我们的目的是确保无法阅读普通印刷文本的人能够平等地获得知识、参与社区和体验。