1

How can I render html and/or non local website into a nativescript app? I cant find a way to start or manipulate a browser instance.

Improve this question
1

2 Answers 2

Reset to default
4

The documentation will help you quite a bit, but here are two examples:

Example with url

This example will create a new page with a WebView on it and then navigate to that page. Url may be local (html file on phone) or remote (http://...)

var frameModule = require('ui/frame');
var pageModule = require('ui/page');
var webViewModule = require("ui/web-view");

var factoryFunc = function () {
    var webView = new webViewModule.WebView();
    webView.url = 'http://www.example.com';
    var page = new pageModule.Page();
    page.content = webView;
    return page;
};

frameModule.topmost().navigate(factoryFunc);

Example of loading local data into a WebView

An example of where you have a view (.xml) and and its corresponding .js file and where you feed it a string containing the html to be displayed.

Where the .xml is:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded">
    <WebView id="myWebView" />
</Page>

and the .js:

exports.loaded = function(args) {
    var page = args.object;
    var webView = page.getViewById('myWebView');
    var application = require('application');
    var html = '<html><body><h1>I can haz webview?</h1></body><html>';

    if (application.ios) {
        webView.ios.loadHTMLStringBaseURL(html, null);
    } else if (application.android) {
        webview.android.loadData(html, 'text/html', null);
    }
};
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

i try to run this example and the android emulator starts the app, it pop-ups me a message "Unfortunately , myapp has stopped. " p.s. i used the url example so im not pretty sure about my xml file and what it is supposed to contain
maybe is smthin wrong with my permissions?....i cant figure out what is wrong by the logs
Does your logs say anything? Can you show your code?
As Vlad said in a comment (which my low reputation prohibits me to comment on), you can use the src property. It's not yet released but you can checkout the code from GitHub and build it. Follow the Using the latest tns_modules steps here: github.com/NativeScript/NativeScript/issues/180
1

In the upcoming release you will be able to specify the HTML like this:

<Page>
    <WebView src="<html><body><h1>I can haz webview?</h1></body><html>" />
</Page>

Src property will work for URL and local file path as well.

Improve this answer

3 Comments

do you know when the the release will come ?
The release will be in early June you can however get the latest from master branch even now. Here is also more info about running latest from master: docs.nativescript.org/running-latest
Totally works for me, when not surrounded by <Page></Page>!! Also: <WebView src="http\://whatever"></WebView>; .. (not nested within <Page></Page>) for including HTML by fetching it via the URL. Enjoy, and vote up! :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.