NativeScript WebView загружает локальные ресурсы в документ src

Я загружаю локальный html-файл в качестве src для компонента NativeScript WebView. В файле html содержатся теги сценария, которые ссылаются на файлы javascript, которые также являются локальными ресурсами (объединены в приложении). Файл html загружается в WebView нормально, а файл сценария, на который имеется ссылка (mylib.js), нет.

Я подозреваю, что это проблема с путями, но я пробовал почти все варианты, которые только мог придумать, но безрезультатно.

Мой проект на самом деле является проектом NativeScript-Vue и выглядит следующим образом:

App.vue

<template>
    <Page @loaded="onPageLoaded">
        <ActionBar title="Welcome to WebView"/>
        <GridLayout>
            <WebView ref="myWebView" row="0" col="0" 
            :src="filePath" @loadFinished="onWebViewLoaded" />
        </GridLayout>
    </Page>
</template>

<script>
import * as fs from "tns-core-modules/file-system"
import * as utils from "utils/utils"

  export default {
    data() {
      return {
        filePath: ''
      }
    },
    methods: {
        onPageLoaded () {
            this.setLocalIndexFilePath()
        },
        onWebViewLoaded (event) {
            if (event.error) { 
                console.log(error)
            } else {
                console.log('webview loaded')
            }
        },
        setLocalIndexFilePath () {
            const deviceName = 
            utils.ios.getter(UIDevice, UIDevice.currentDevice).name
            // iPhone 6 is the name of my simulator
            if (deviceName == 'iPhone 6') {
                const webViewSRC = 
                encodeURI(`${fs.knownFolders.currentApp().path}/www/index.html`)
                this.filePath =  webViewSRC
                console.log(webViewSRC)
            } else {
                this.filePath = "~/www/index.html"
            }
        }
    }
  }
</script>

index.html

<!doctype html>
<head>
    <script src="./mylib.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onBodyLoaded() {
            var msg = document.getElementById('msg');
            msg.insertAdjacentHTML('beforeend', '<br />body loaded!');
        }

        function onLocalButtonClicked() {
            var msg = document.getElementById('msg');
            msg.insertAdjacentHTML('beforeend', '<br />local: You clicked button!');
        }
    </script>
</head>
<html>
    <body onload="onBodyLoaded()">
      <Button onclick="onLocalButtonClicked()">Click Me</Button>
      <Button onclick="onButtonClicked()">Click Me to test external js</Button>
      <p id="msg">Debug:</p> 
    </body>
</html>

mylib.js

// This function never gets called
function onButtonClicked() {
  var msg = document.getElementById('msg');
  msg.insertAdjacentHTML('beforeend', '<br />external js file: You clicked button!');
}

webpack.config.sys

... 
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
    { from: "fonts/**" },
    { from: "**/*.+(jpg|png)" },
    { from: "assets/**/*" },
    { from: "www/**/*" }, 
...

nativescript webview nativescript-vue local-files
person CAJazzer    schedule 14.11.2018    source источник
comment
На какой платформе вы столкнулись с этой проблемой?   -  person Manoj    schedule 15.11.2018
comment
Проблема специфична для устройств iOS. Спасибо.   -  person CAJazzer    schedule 15.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

Это известная проблема iOS. Вы можете попробовать исправление, я реализовал то же самое в Playground для аналогичной проблемы, это также применимо для Vue.

person Manoj    schedule 15.11.2018
comment
Спасибо @Manoj. Код из патча был именно тем, что нужно, чтобы это работало. Я также неправильно закодировал webViewSrc в образце кода. Все работает как положено. - person CAJazzer; 16.11.2018