如何在本地脚本中将文件加载到webview中 [英] How to load files into webview in native script

问题描述

我一直在想方设法让本地网页内容加载并设置本地脚本中的webview html内容。
我已经成功地在模拟器上工作，但它似乎不能在设备上工作。我一直在搜索，大多数人都说我需要找到我的应用程序的文档目录中的我的html文件，但据我所见，当我部署应用程序时，无法获取我需要的文件应用程序。任何人都可以阐明如何获取位于应用程序的文档文件夹中的文件，或在运行时将其复制到应用程序中。谢谢

I've been trying to figure out a way to get a local webpage content to load and set the webview html content in native script. I've successfully got it working on the simulator but it doesn't seem to work on the device. I've googled around and most people are saying that I need to locate my html files in the 'Documents' dir of my app, but as far as I can see there is no way to get the files I need there when I deploy the app. Can anyone else shed some light on the ways to get files located in the documents folder of the app on deploy or copying them there at runtime. Thank you

var createViewModel   = require("./main-view-model").createViewModel;
var orientationModule = require("nativescript-screen-orientation");
var fs = require("file-system");

var webViewInterfaceModule = require('nativescript-webview-interface');
var oWebViewInterface;
var page; 

function pageLoaded(){
    setupWebViewInterface(page);
    // orientationModule.setCurrentOrientation("landscape", function(){     
    //     //console.log("landscape orientation set");
    // });
}

// Initializes plugin with a webView 
function setupWebViewInterface(page){
    var webView = page.getViewById('webView');
    var documents = fs.knownFolders;

    oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, documents.currentApp().path + '/htllo/index.html');
}

function navigatingTo(args) {
    page = args.object;
    page.bindingContext = createViewModel();
}

exports.pageLoad     = pageLoaded;
exports.navigatingTo = navigatingTo;

推荐答案

$ c> src 来自本地文件。在这个例子中，已经显示了两种情况都带有 nativescript-webview-interface 插件，没有它。 〜/ 将路径返回到您的应用程序文件夹。

Here is an example how to add WebView src from local file. In the example has been shown the both cases with nativescript-webview-interface plugin and without it. ~/ returns the path to your app folder.

main-page.xml

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="onLoaded">
  <GridLayout rows="150 *" columns="*">
      <WebView row="0" col="0" id="WebViewId"/>
      <WebView row="1" col="0" id="WebViewId2"/>
  </GridLayout>
</Page>

main-page.ts

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
var webViewInterfaceModule = require("nativescript-webview-interface");
import {WebView} from "ui/web-view";

var oWebViewInterface;
export function onLoaded(args: EventData) {
  let page = <Page>args.object;
  var webView:WebView = <WebView>page.getViewById('WebViewId');
  oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/index.html');
  var SecondWebView:WebView = <WebView>page.getViewById('WebViewId2');
  SecondWebView.src="~/secondpage.html"
  page.bindingContext = new HelloWorldModel();
}

这篇关于如何在本地脚本中将文件加载到webview中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！