在 WebView 上设置监听器 |原生脚本 + vue答案

【问题标题】：Set listener on WebView | nativescript + vue在 WebView 上设置监听器 |原生脚本 + vue
【发布时间】：2021-01-28 21:04:04
【问题描述】：

我正在尝试从 YouTube 播放视频并通过 YT.API 获取当前时间。

视频播放成功，HTML 内容的功能也可以正常工作，

但我不知道如何从这个 webView 元素中获取数据。

我想了解来自 webView 的事件，这是我的代码：

<template>
<Page @loaded=pageLoaded>
    <GridLayout>
        <web-view id="webView"></web-view>
    </GridLayout>
</Page>
</template>

let webViewInterfaceModule = require('nativescript-webview-interface');

@Component 

export default class someComponent extends Vue {

    oWebViewInterface;

    pageLoaded(args){
        let page = args.object;
        this.setupWebViewInterface(page);
    }

    setupWebViewInterface(page){

        let webView = page.getViewById('webView');
        this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, this.html);

        this.oWebViewInterface.on( '*', function(eventData){
            console.log("some change!!"); // but never fires!
        });

    }
}

我将this.html 定义为：

html = `
    <!DOCTYPE html>
    <html>
    <body>
        <div id="player"></div>
        <script>

            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                height: '280',
                width: '100%',
                videoId: 'k3On6DLPGLA',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
                });
            }

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            var done = false;
            function onPlayerStateChange(event) {
                console.log("state changed!"); // it fires!
            }

            function stopVideo() {
                player.stopVideo();
            }

    <\/script>
    <\/body>
    <\/html>
`;

但我只是得到这样的结果：

chromium: [ERROR:web_contents_delegate.cc(224)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
chromium: [INFO:CONSOLE(35)] "state changed!", source: ..../ (35)

【问题讨论】：

标签： android vue.js webview nativescript

【解决方案1】：

好的，我得到了答案：

这里有一些问题：

#1。植入nativescript-webview-interface.js：

我需要复制这个文件：

cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/assets/www/lib/

#2。权限！

但 #1 导致另一个问题：net::ERR_ACCESS_DENIED

为了解决这个问题，我添加了这个：

setupWebViewInterface(page){
    let webView = page.getViewById('webView');
    webView.android.getSettings().setAllowFileAccess(true);
}

现在我可以访问该文件夹，所以我将 this.html 变量内容移动到一个新文件：/assets/www/index.html

#3。设置源

由于刚才我们可以访问该文件夹，我们需要（重新）设置 web-view 的 src，所以我将这个添加到 setupWebViewInterface 函数中：

this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface( webView, '~/assets/www/index.html' );

注意：我从<webView /> 中删除了 src，因为它会导致问题！（如果新旧 src 相同，则不会重新加载！）

#4.定义变量：

在 html 文件中我需要添加这一行：

var oWebViewInterface = window.nsWebViewInterface;

#5。定义监听器：

我加了这个：oWebViewInterface.emit('anyEvent', event); 在这个函数里面：

function onPlayerStateChange(event) {
    console.log("state changed!");
    oWebViewInterface.emit('anyEvent', event);
}

现在可以了:)

【讨论】：