Nativescript: Q: How to reload a webview?

Created on 13 Apr 2017  路  9Comments  路  Source: NativeScript/NativeScript

Hello NativeScript guys :)

I have tried for days to get my webview to reload the current page, but nothing seems to be working.

I'm bulding my app based on this github project: https://github.com/shripalsoni04/nativescript-webview-interface

I have setup the webview with this local file: ~/www/index.html

I have tried:

  • webview.reload() (Nothing works)
  • webview.src = "<h1>LOADING</h1>"; webview.src = "~/www/index.html" (This can work on emulator, not device)
  • webviewinterface.destroy(); webviewinterface = new webviewinterface(webview,"~/www/index.html") (Working on emulator, not device)

Can anybody help me?


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

backlog bug medium

Most helpful comment

This works great for me:

function reloadWebview(page: Page, webview: WebView): void {
    if (isString(webview.url) && webview.url.length > 0) {
        webview.reload();
    } else {
        // webview.reload() wouldn't do the trick because the url is lost
        // due to an error that occurred on the initial load
        webview.stopLoading();
        webview.url = page.navigationContext.url;
    }
}

All 9 comments

Hi @AndersGerner,
Thank you for contacting us.
I tested your case on my side, however, was unable to reproduce issues with reloading the WebView content.
For your convenience, I created two sample projects. In the first one, I have used pure NativeScript WebView and there I just replace the source of the component and everything seems to be reloaded properly.
pure_webview_test.zip

On the second one, I used nativescript-webview-interface.
nativescript-webview-interface_test.zip

Could you review the both apps and make the needed changes, which will allow us to recreate the problem?
It would also help if you could provide some more info about your environment(CLI, modules versions) and info about the device, which you are using for testing.

Thank you so much @tsonevn ! I'll have a look at it and get back to you.

@tsonevn I have looked at you code.
It seems that the code only updates the src on the webview.

I can also get the webview to have a src and then change it to another. But I need it to reload the current page its on. I'm running a SingePageApplication in the webview, and it needs to be reloaded .

So the src of my webview is ~/www/index.html and it just needs to reload that page, just like location.reload would do in a browser.

I'm sorry if I have misunderstood something from you reply/code, but then please explain. :)

Hi @AndersGerner,
Excuse me for the misunderstanding.
Indeed at the moment WebView reload will not reload current page, while loading the component source from local HTML file.

We will research what is causing this issue and will provide the appropriate fix.
For your convenience, I am attaching sample app, where this behavior could be reproduced.
webview_reload_issue.zip

@tsonevn Thank you very much! Your help is really appriciated.

I don't mean to sound like a jerk, but do you have any kind of ETA on this? I'm just curious if there are a lot other issues to be resolved before mine :)

@tsonevn Any news? :)

Hi @AndersGerner,
I will research, whether there is a possible workaround for this case. I will write you back as soon as I have some additional info about this.

This works great for me:

function reloadWebview(page: Page, webview: WebView): void {
    if (isString(webview.url) && webview.url.length > 0) {
        webview.reload();
    } else {
        // webview.reload() wouldn't do the trick because the url is lost
        // due to an error that occurred on the initial load
        webview.stopLoading();
        webview.url = page.navigationContext.url;
    }
}

Hi @AndersGerner,
I tested the suggested workaround from @mn-martin and it seems to work as expected.

For you convenience, I am also attaching sample project with the workaround:
Archive.zip

Was this page helpful?
0 / 5 - 0 ratings

Related issues

OscarLopezArnaiz picture OscarLopezArnaiz  路  3Comments

NickIliev picture NickIliev  路  3Comments

hshristov picture hshristov  路  3Comments

valentinstoychev picture valentinstoychev  路  3Comments

minjunlan picture minjunlan  路  3Comments