NativeScript WebView 在 src 文档中加载本地资源

Posted

技术标签:

【中文标题】NativeScript WebView 在 src 文档中加载本地资源【英文标题】:NativeScript WebView loading local resources in src document 【发布时间】:2019-04-17 23:29:00 【问题描述】:

我正在加载一个本地 html 文件作为 NativeScript WebView 组件的 src。包含在 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/**/*" , 
...

【问题讨论】:

您在哪个平台上遇到此问题? 此问题特定于 iOS 设备。谢谢。 【参考方案1】:

这是 iOS 的known issue。有一个 patch work 你可以试试,我在 Playground 中实现了相同的类似问题,它也适用于 Vue。

【讨论】:

谢谢@Manoj。补丁中的代码正是让它工作所需要的。我在代码示例中对 webViewSrc 进行编码也是不正确的。一切都按预期工作。

以上是关于NativeScript WebView 在 src 文档中加载本地资源的主要内容,如果未能解决你的问题,请参考以下文章

如何在nativescript vue中处理webview上的android后退按钮

如何在 Nativescript Vue WebView 中启用 LocalStorage?

NativeScript WebView 在 src 文档中加载本地资源

NativeScript:禁用 iOS WebView 缩放控件的方法?

使文件输入字段在Android nativescript vue webview上工作

Nativescript webview 在 iOS 上获取 cookie