Nativescript-WebView-Interface
Nativescript Plugin for bi-directional communication between WebView and Android/iOS
Installation
From the terminal, go to your app's root folder and execute:
tns plugin add nativescript-webview-interface
Once the plugin is installed, you need to copy plugin file for webView into your webView content folder.e.g
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
Usage
For a quick start, you can check this Demo App and Blog Post.If you are using this plugin with Angular 2, you can check this angular version of the demo app.
Inside Native App
Insert a web-view somewhere in your page.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
....
<web-view id="webView"></web-view>
....
</Page>
Initialize WebViewInterface Plugin in your javascript file.
var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
// Initializes plugin with a webView
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
Note: Please note in above example that, we have not set src in template and we have passed it in constructor of WebViewInterface. This is recommended way to use this plugin to avoid issueof communication from web-view to android not working sometimes on some devices.
Use any API Method of WebViewInterface Class
function handleEventFromWebView(){
oWebViewInterface.on('anyEvent', function(eventData){
// perform action on event
});
}
function emitEventToWebView(){
oWebViewInterface.emit('anyEvent', eventData);
}
function callJSFunction(){
oWebViewInterface.callJSFunction('functionName', args, function(result){
});
}
If you want to emit an event or call a JS function on load of the page, you need to call all such code once webView is loaded
webView.on('loadFinished', (args) => {
if (!args.error) {
// emit event to webView or call JS function of webView
}
});
Inside WebView
Import nativescript-webview-interface.js in your html page.
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
</html>
Use any API Method of window.nsWebViewInterface inside webview
var oWebViewInterface = window.nsWebViewInterface;
// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
});
// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);
// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
// do any processing
return dataOrPromise;
}
API
Native App API
Constructor:
WebViewInterface(webView: WebView, src?: string)
webView is an instance of nativescript web-view.
src is the url/local path to be loaded in web-view. If it is set, then you don't need to set it in src attribute in xml file. For proper functioning of web-view to native communication on all device's it is recommended to set src here.
API Methods of WebViewInterface Class:
on(eventOrCmdName: string, callback: (eventData: any) => void): void
Use this method to assign listener to any event/command emitted from webView.
Callback will be executed with the data sent from webView in any format.
off(eventOrCmdName: string, callback?: (eventData: any) => void): void
Use this method to de-register listener of any event/command emitted from webView.
If callback is not set, all the event listeners for this event will be de-registered.
emit(eventOrCmdName: string, data: any): void
Use this method to emit any event/command from native app to webView with data in any format.
callJSFunction(webViewFunctionName: string, args: any[], successHandler: (result: any) => void, errorHandler: (error: any) => void): void
Use this method to call to any javascript function in global scope in webView.
Arguments are optional. But if supplied, must be in array format.
If the function is successfully executed, the successHandler will be called with the result returned by the JS Function. If promise is returned from the JS Function, the resolved value will come as result.
If the function execution generates any error, the errorHandler will be called with the error.
destroy(): void
Use this method to clean up webviewInterface resources (eventListeners) to avoid memory leak.
WebView API
API Methods available in window.nsWebViewInterface global variable.
on(eventOrCmdName: string, callback: (eventData: any) => void): void
Use this method to assign listener to any event/command emited from native app.
Callback will be executed with the data sent from native app in any format.
emit(eventOrCmdName: string, data: any): void
Use this method to emit any event/command from webView to native app with data in any format.
-
前言 总结 Android WebView 常用的相关知识点，令包含以下干货内容分析：Js注入漏洞、WebView 遇到的坑、JsBridge 原理以及框架使用(JsBridge,DSBridge-Android)、缓存机制应用、性能优化、腾讯开源框架 VasSonic (之后会进行代码分析)。 目录 一、简介 这部分主要介绍下 WebView，WebView 是一个用来显示 Web 网页的控件，
-
从零收拾一个hybrid容器（一）-- 从选择JS通信方案开始 上一篇文章介绍了如果自己亲自开发一个hybrid容器，应该怎么去选择JS通信方案，并且重点强调了现在市面上流传最广的WebViewJavascriptBridge 他存在的致命问题，以及不应该因为所谓的看似写法统一而在api选型上做功能妥协的思想 前言 这篇文章拖到年后才开始写是有点罪过罪过，不过在写之前我想说几点，这系列文章我想表达
-
[参考网页](http://blog.sina.com.cn/s/blog_8241e8510101btvk.html http://www.2cto.com/kf/201411/354679.html ) 1.添加权限：”android.permission.INTERNET” 否则会出现webpage not available错误 2.在Activity中生成webView组件：WebVie
-
这段时间基于项目需要 在开发中与WebView的接触比较多，前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上，更有人说：HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5+JS+CSS+Native的跨平台开发模式还是为很多企业节省了开发资源和成本、一定程度上提升了WebView的使用率和地位。 网上关于HTML5规范定稿的一篇见解文章： http://www
-
本平台的文章更新会有延迟，大家可以关注微信公众号-顾林海，包括年底前会更新kotlin由浅入深系列教程，目前计划在微信公众号进行首发，如果大家想获取最新教程，请关注微信公众 目前市面上的大部分APP都是混合开发，也就是大家所说的Hybrid方式，集成了Native和Web的优点，使用native可以保证用户的体验，使用Web可以使得APP具有动态更新的能力，同时有利于跨平台开发，节省人力物力。平时
-
最近我司项目中添加了一个新功能，因为新功能多个平台要实现公用（ios端、微信小程序、一些网站）因此新功能通过HTML实现，其中牵扯到了一些native（这里用的是Cordova的插件InAppBrowser）和HTML交互的逻辑，特在此记录。 一、 html调用native原生方法： html： <html> <head></head> <body> <button typ
-
nativeUI-原生界面 nativeUI管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。 方法： actionSheet: 弹出系统选择按钮框 alert: 弹出系统提示对话框 confirm: 弹出系统确认对话框 closeWaiting: 关闭系统等待对话框 showWaiting: 显示系统等待对话框 pickDate: 弹出系统日期选择对话框 pi
-
Anaroid WebView API详解--http://blog.csdn.net/zhangcanyan/article/details/51344090; Android5.1系统WebView内存泄漏场景--http://blog.csdn.net/zhangcanyan/article/details/51344118; Android WebView的缓存方式分析--http:/
-
WebView Hybird 开发 Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 hybrid开发其实就是在App开发过程中既使用到了web（H5）开发技术也使用到了native开发技术，通过这两种技术混合实现的App就是我们通常说的hybrid ap
-
Kitkat的改变 Google为了加强WebView的功能，在Kitkat引入了Chromium内核。但还是存在着编辑的bug。 我所知道的一个bug是： Kitkat版WebView在删除Html标签时处理不好，例如<img>标签，就无法删除。点击删除时直接越过此元素，将光标定位在图片前方，对图片不做处理。 当然，这个bug在Android 5.0 修复了。 Lollipop新策略 Altho
-
一、简介 这部分主要介绍下 WebView，WebView 是一个用来显示 Web 网页的控件，继承自 AbsoluteLayout，和使用系统其他控件没什么区别，只是 WeView 控件方法比较多比较丰富。因为它就是一个微型浏览器，包含一个浏览器该有的基本功能，例如：滚动、缩放、前进、后退下一页、搜索、执行 Js等功能。 在 Android 4.4 之前使用 WebKit 作为渲染内核，4.4
-
背景：借助现有接口技术，js可以执行原生java代码中的方法，可以得到方法的返回值，可以让原生java代码在主线程中动态的操作UI；但是借助该接口，原生java代码，采用webview.loadUrl("javascript: JsFunctionName")，只能做到执行js中的方法，如果想获取js中定义的全局变量，或者获取某个js函数的返回值，这种方式无法做到，webview也没有提供别的函数
-
什么是WebView？ WebView是Android中的原生UI控件，主要用于在app应用中方便地访问远程网页或本地html资源。同时，WebView也在Android中充当Java代码和JS代码之间交互的桥梁。实际上，也可以将WebView看做一个功能最小化的浏览器。 WebView的应用场景 目前很多公司的 App 使用一个 WebView 作为网页加载， App 中的所有网页内容使用 HT
-
NativeScript WebView Utils plugin Add request headers to a NativeScript WebView. Perhaps more utils later. For NativeScript versions older than 7, use a plugin version older than 4.0.0. Installation F
-
NativeScript Advanced Webview An advanced webview using Chrome Custom Tabs on Android and SFSafariViewController on iOS. Installation To install execute: NativeScript 7+: ns plugin add nativescript-ad
-
webview标记用于在您的Electron应用中嵌入“来宾”内容，例如网页。 此内容包含在webview容器中。 应用内的嵌入式页面控制着如何显示此内容。 webview在与您的应用程序不同的进程中运行。 为确保恶意内容的安全性，webview与您的网页没有相同的权限。 这可以确保您的应用免受嵌入内容的侵害。 您的应用与嵌入页面之间的所有互动都将是异步的。 让我们考虑一个示例来了解在我们的Ele
-
Extends Widget A widget that can display a web page. Since this widget requires a lot of resources it’s recommended to have no more than one instance at a time. Import this type with “const {WebView}
-
组件 触发字符 mui.open(打开新页面) mopen mui.currentWebview (当前页面) mcurrent mui.back()(关闭窗口) mback mui.backFunction()(重写返回逻辑) mbackfunction mui.backDouble()(双击退出应用) mbackDouble mui.backTast(双击进入后台) mbacktast mui
-
webview 模块提供了一系列的 <web> 组件操作接口，例如 goBack、goForward 和 reload，一般与 <web> 组件一起使用，在 Weex 页面内渲染 web 页面。 var webElement = this.$el('webview'); var webview = weex.requireModule('webview'); webview.goBack(webE