How to load files into webview in native script

Question

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;

To access android device Documents folder you should use native code. Here you will find a example - github.com/tsonevn/ReadFilesFromDevice/blob/master/app/…, how to do that. Regarding to your question you should set DIRECTORY_DOCUMENTS in getExternalStoragePublicDirectory method instead of DIRECTORY_DOWNLOADS. For further info, which directories you could access in Android you could review the article here - developer.android.com/reference/android/os/Environment.html. — Nikolay Tsonev
– Nikolay Tsonev, Commented Oct 12, 2016 at 9:43
Thank you for your answer. Its not quite what i want. Basically. My customer wants an app where I can make a login and register in the native app components. Then from there be forwarded to a 'Home' page which is a web window where i load an index.html that is located locally. So when i put the folder with the html in the app dir its works fine in the simulator but not on the ios device. I found where another guy said he had the same issue until he started loading the files from the Documents dir and not the the app dir. — TheMan68
– TheMan68, Commented Oct 12, 2016 at 9:51
Its no issues with the file structure etc and don't want to mess with native code i just need to know how to 1. Deploy my html folder to the Documents dir on both ios and android when i compile to the device or move them from the app dir to the documents dir on the first app load. Thank you very much for your hlep — TheMan68
– TheMan68, Commented Oct 12, 2016 at 9:53
I am not sure, why you should move the files in the Documents dir. You could review the example in the answer, where has been shown how to load WebVew src from local file. — Nikolay Tsonev
– Nikolay Tsonev, Commented Oct 12, 2016 at 10:47
Hi there. No still getting same problem. Its a current problem on the ios device (Pointed out here whoischris.com/nativescript-js). Thats why i need to move the files. Thank you for your help — TheMan68
– TheMan68, Commented Oct 13, 2016 at 3:21

Nikolay Tsonev · Accepted Answer · 2016-10-12 10:42:00Z

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

<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

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();
}

Wow. Thank you for the comment about the '~/' pointing to your app dir. Im on linux so naturally thinking that it points to the home dir. I tried this but still didn't work on the device as it points out in the following link: whoischris.com/nativescript-js . There seems to be an open issue of loading flies straight from app dir and he points out that once he moved the dir to the Documents dir that it fixed the loading issue. but as I deploy the files with the app I don't know how to get those files into the Documents dir. And so far found no way of moving the files to that dir
I can't reach the file. My index.html cannot be loaded because net::ERR_ACCESS_DENIED Please help

Collectives™ on Stack Overflow

How to load files into webview in native script

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related