@essent/nativescript-webview-ext

为 NativeScript 扩展 WebView 功能，增加 "x-local"-自定义方案以加载本地文件，处理 WebView 和 NativeScript 之间的事件，JavaScript 执行，注入 CSS 和 JS 文件。支持 Android 19+ 和 iOS9+。

注意：这扩展并更新了优秀的：https://github.com/Notalib/nativescript-webview-ext

npm install @essent/nativescript-webview-ext

功能

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

将 minSdkVersion 更新到 19 或更高

需要 Android SDK 19，更新 App_Resources/Android/app.gradle

android {
  defaultConfig {
    minSdkVersion 19 // change this line
    generatedDensities = []
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

核心支持

按如下模板加载

<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:essent="@essent/nativescript-webview-ext">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>

    <essent:WebViewExt src="https://nota.dk"></<essent:WebViewExt>
</Page>

Angular 支持

从 @essent/nativescript-webview-ext/angular 导入 WebViewExtModule 并将其添加到您的 NgModule。

这注册了 WebViewExt 元素。将 <WebView> 标签替换为 <WebViewExt>

Vue 支持

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

这注册了 WebViewExt 元素。将 <WebView> 标签替换为 <WebViewExt>

用法

限制

x-local:// 的自定义方案处理程序仅在 Android 和 iOS 11+ 上受支持

由于 ITMS-90809，移除了 iOS <11 的自定义方案支持。

API

NativeScript 视图

事件

WebView

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

等待nsWebViewBridge可用

    window.addEventListener("ns-bridge-ready", function(e) {
        var nsWebViewBridge = e.detail || window.nsWebViewBridge;

        // do stuff here
    });

可能的功能

• Cookie辅助工具？
• 与原生层共享缓存？

Android

• 设置
  • AppCache？
  • 用户代理？

iOS

• 设置？

关于Nota

Nota是丹麦为印刷障碍人士提供图书馆和专家中心。要成为Nota的成员，您必须能够证明您无法阅读普通印刷文本。Nota的成员是视障人士、阅读障碍或其他人。

许可证

Apache许可证版本2.0