在 nativescript 中获取 webview 的内容
get content of webview in nativescript
有没有办法在页面加载后读取 webview 的内容?
原因是重定向(如 window.location.replace 或 window.location.href )在 IOS 中不起作用,在我的情况下,在 Android 中工作正常。
https://docs.nativescript.org/cookbook/ui/web-view
我可以访问 url,错误。但如何访问内容?
纳拉扬
我只是在寻找 IOS。我找到了答案并在这里分享。对于 Android 我想指出一些线索。
if (webView.ios) {
var webHeader = webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML").trim();
console.log(webHeader);
var webBody = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim();
console.log(webBody);
} else if (webView.android) {
webTitle = webView.android.getTitle(); //getting the title title
console.log(webTitle)
}
Some stack overflow lead for Android
你可以看看这个post。安装一个允许通过 observables 与 webview 通信的库。现在我自己在使用它,它对 iOS 和 Android
都很好
1- 安装:
tns 插件添加 nativescript-webview-interface
2-在web项目中复制插件文件
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
3-代码:
xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="pageLoaded">
<web-view id="webView"></web-view>
</Page>
var webViewInterfaceModule = require('nativescript-webview-
interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new
webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
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){
});
}
网络视图:
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
网络视图 js:
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;
}
更多信息:
有没有办法在页面加载后读取 webview 的内容?
原因是重定向(如 window.location.replace 或 window.location.href )在 IOS 中不起作用,在我的情况下,在 Android 中工作正常。
https://docs.nativescript.org/cookbook/ui/web-view 我可以访问 url,错误。但如何访问内容?
纳拉扬
我只是在寻找 IOS。我找到了答案并在这里分享。对于 Android 我想指出一些线索。
if (webView.ios) {
var webHeader = webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML").trim();
console.log(webHeader);
var webBody = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim();
console.log(webBody);
} else if (webView.android) {
webTitle = webView.android.getTitle(); //getting the title title
console.log(webTitle)
}
Some stack overflow lead for Android
你可以看看这个post。安装一个允许通过 observables 与 webview 通信的库。现在我自己在使用它,它对 iOS 和 Android
都很好1- 安装: tns 插件添加 nativescript-webview-interface 2-在web项目中复制插件文件 cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/ 3-代码: xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="pageLoaded">
<web-view id="webView"></web-view>
</Page>
var webViewInterfaceModule = require('nativescript-webview-
interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new
webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
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){
});
}
网络视图:
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
网络视图 js:
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;
}
更多信息: