Блог

Главная - Вопросы по программированию - Установить прослушиватель в WebView | nativescript vue

Установить прослушиватель в WebView | nativescript vue

#android #vue.js #webview #nativescript

#Android #vue.js #webview #nativescript

Вопрос:

Я пытаюсь воспроизвести видео с 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)

Ответ №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. настройка src

поскольку только сейчас у нас есть доступ к папке, нам нужно (повторно) установить src для web-view, поэтому я добавляю его в setupWebViewInterface функцию:

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

примечание: я удалил src из <webView /> , поскольку это вызывает проблему! (если старый и новый src будут одинаковыми, он не будет перезагружаться!)

# 4. определение переменных:

в HTML-файл мне нужно добавить эту строку:

 var oWebViewInterface = window.nsWebViewInterface;

#5. определение прослушивателя:

Я добавляю это: oWebViewInterface.emit('anyEvent', event); внутри этой функции:

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

Теперь это работает 🙂