市场place
作者 NativeScript.org
@nativescript-community/ui-webview
由 NativeScript 社区贡献 | v1.5.0
NativeScript 的图片缓存插件
npm i --save @nativescript-community/ui-webview

# @nativescript-community/ui-webview

为 NativeScript 添加了许多选项的扩展 WebView。代码最初基于 nativescript-webview-ext

功能

  • 为 WebView 添加了自定义方案处理器，以便在 WebView 内加载资源。

    • 注意：对于 iOS 11+ 使用 WKWebView，而对于 iOS <11 使用 UIWebView

  • 增加了捕获 URL 的支持。

    • 这允许应用程序在外部浏览器中打开外部链接并处理 tel 链接

  • 增加了如下功能：

    • executeJavaScript(code: string) 用于执行 JavaScript 代码并获取结果。
    • executePromise(code: string) 用于调用 promises 并获取结果。
    • getTitle() 返回 document.title。

  • 增加了注入 css 和 javascript 文件的功能。

    • 到当前页面。
    • 页面加载时自动注入。

  • 支持

    • Android 19+
    • iOS 9+

安装

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

tns plugin add @nativescript-community/ui-webview

Angular 支持

从 @nativescript-community/ui-webview/angular 导入 AWebViewModule 并将其添加到您的 NgModule。

这将注册 AWebView 元素。将标签替换为

Vue 支持

import Vue from 'nativescript-vue';
import WebViewPlugin from '@nativescript-community/ui-webview/vue';

Vue.use(WebViewPlugin);

这将注册 AWebView 元素。将标签替换为

用法

限制

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

iOS 11 增加了在 WKWebView 上设置 WKURLSchemeHandler 的支持。iOS 11 之前没有对拦截 URL 的 WKWebView 支持使用，所以我们使用自定义的 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 则为真
readonly isWkWebView true / false 本地 WebView 是 WKWebView 吗？如果是 iOS >=11 则为真
src 加载 src
autoInjectJSBridge true / false 是否应该在 loadFinishedEvent 上注入 window.nsWebViewBridge？默认为 true
builtInZoomControls true / false Android：是否使用内置的缩放机制
cacheMode default / no_cache / cache_first / cache_only Android：设置缓存模式。
databaseStorage true / false Android：启用/禁用数据库存储 API。注意：它会影响进程中的所有 WebView。
debugMode true / false 在 Android 的 WebView 上启用 Chrome 调试器，在 iOS 的 WebView 上启用 Safari 调试器。注意：适用于应用程序中的所有 WebView。
displayZoomControls true / false Android：使用内置缩放机制时显示屏幕上的缩放控件
domStorage true / false Android：启用/禁用 DOM 存储 API。例如 localStorage
scalesPageToFit UIWebView：网页是否应缩放以适合视图？默认为 false
scrollBounce true / false iOS: 滚动视图是否应该弹回？默认为true。
supportZoom true / false Android: 网页视图是否支持缩放
viewPortSize false / view-port字符串 / ViewPortProperties 在加载完成后设置viewport元数据。注意： WkWebView默认设置initial-scale=1.0。
limitsNavigationsToAppBoundDomains false iOS: 允许启用Service Workers 注意： 如果设置为true，WKAppBoundDomains也应在info.plist中设置。
scrollBarIndicatorVisible false 允许隐藏滚动条。
函数 描述
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文件注入到网页视图中。应在loadFinishedEvent之后调用
loadStyleSheetFile(stylesheetName: string, filepath: string, insertBefore: boolean) 将CSS文件加载到document.head中。如果before为true，它将被添加到document.head的顶部，否则作为最后一个元素
loadJavaScriptFiles(files: {resourceName: string, filepath: string}[]) 将多个javascript文件注入到网页视图中。应在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) 在网页视图中运行一个promise。 注意： 执行scriptCode必须返回一个promise。
emitToWebView(eventName: string, data: any) 向网页视图中发射一个事件。注意：data必须可以用JSON.stringify序列化，否则会抛出异常。
getTitle() 返回一个包含当前文档标题的Promise。

事件

事件 描述
loadFinished 当发生loadFinished事件时被触发。args是LoadFinishedEventData
loadProgress Android仅：在页面加载期间触发，以指示进度。args是LoadProgressEventData
loadStarted 当发生loadStarted事件时被触发。args是LoadStartedEventData
shouldOverrideUrlLoading 在网页视图请求URL之前触发。可以通过在ShouldOverrideUrlLoadEventData中将args.cancel设置为true来取消。
titleChanged 文档标题已更改
webAlert 当在网页视图中触发window.alert时被触发，需要使用自定义对话框进行网页警报。args在WebAlertEventData中。args.callback()必须被调用以指示警报已关闭。注意： UIWebView不支持
webConfirm 当在网页视图中触发window.confirm时被触发，需要使用自定义对话框进行网页确认框。args在webConfirmEvent中。args.callback(boolean)必须被调用以指示确认框已关闭。注意： UIWebView不支持
webConsole Android仅：当向网页控制台添加一行时被触发。args是WebConsoleEventData。
webPrompt 当在webview内部触发window.prompt时，会触发此事件，需要使用自定义对话框来处理网页提示框。在webConfirmEvent中包含参数。`args.callback(string`
webview发出的事件 当在webview内部调用nsWebViewBridge.emit(...)时触发。参数在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/nativescript-community/ui-webview.git克隆git仓库
  • 进入src文件夹
  • 使用npm脚本
    • npm run demo.ios
    • npm run demo.android

运行单元测试

  • 从https://github.com/nativescript-community/ui-webview.git克隆git仓库
  • 进入src文件夹
  • 使用npm脚本
    • npm run test.ios
    • npm run test.android

许可证

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

关于Nota

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