Question

我需要在WebView上捕获点击（点击）事件（以显示SVG文件中的图片），这样我就可以根据点击图像的位置显示另一个Nativescript页面（或显示另一个SVG）.. < / p>

有没有办法使用WebView的x，y坐标捕获点击事件？

另一件事。我发现WebView可以捕获加载的html中的超链接...有没有办法在html中建立一个链接，以便在nativescript应用程序中打开另一个本地文件？例如：＆lt; a href =＆＃34;〜/ stuff / foo2.html＆＃34;＆gt; here＆lt; / a＆gt;，但没有工作（东西在我的＆＃34; app＆＃34;文件夹下），但我得到了404.

Answer 1

这是一个可能的解决方案。

将一些前端Javascript代码添加到WebView中显示的页面。使用该Javascript来检测页面上的点击，并在点击时将WebView重定向到新的（虚假）页面。在NativeScript端，侦听WebView的loadStartedEvent（在WebView导航时触发），并在WebView尝试导航到新的虚假页面时执行某些操作。

我看起来像这样：

在浏览器/ WebView代码中。我们为click个事件添加了一个事件监听器（您可能希望将其更改为tap个事件）。点击后，将用户导航到nativescript://{X coordinate}/{Y coordinate}。

window.addEventListener('click', function(event){
    window.location.href='nativescript://' + event.screenX + '/' + event.screenY;
})

然后在NativeScript端，设置一个事件监听器，监听WebView导航的时间，如果它导航到以“nativescript：//”开头的URL，则停止加载事件并从URL中提取坐标。 / p>

var wv = new webViewModule.WebView();
wv.on(webViewModule.WebView.loadStartedEvent, function(event) {

    // Check if the WebView is trying to navigate to 'nativescript://...'
    if (event.url.indexOf('nativescript://') === 0 ) {
        // Stop the loading event
        if (ios) {
            event.object.ios.stopLoading();
        } else if (android) {
            event.object.android.stopLoading();
        }

        // Do something depending on the coordinates in the URL
        var coords = event.url.split('/');
        coords.splice(0, 2);
        console.log(coords[0] + ' - ' + coords[1])
    }
});

至于加载本地文件，您只需要创建本地文件的file://路径。 E.g。

var linkPath = fs.path.join(fs.knownFolders.currentApp().path, 'localHTMLFiles') + '/myFile.html';

var link = '<a href="file://" + linkPath + ">"'

Answer 2

您可以将WebView扩展到WebViewExt https://market.nativescript.org/plugins/@nota%2Fnativescript-webview-ext并使用以下链接获取链接

webview.on(WebViewExt.shouldOverrideUrlLoadingEvent, (_args: ShouldOverrideUrlLoadEventData) => {
   let blocked_url = _args.url;
 
   // Disable loading native app
   _args.cancel = true;            

   // Do some stuff and load another url..
});

Nativescript WebView捕获onclick事件

2 个答案: