none
How to load a local HTML-File into Webview

    Question

  • I still cannot load a local html file using webview.Navigate() method on Windows8 custom preview as the previous thread talked.  I tried with FilePicker and the scheme "ms-appdata:"(for the html located on the appdata), but all doesn't work. Is there any way to load the local html into WebView control?
    Friday, March 02, 2012 8:27 AM

Answers

  • WebView currently does not support the ms-appx, ms-appdata protocols.  It is something we are working on examining supporting.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Marked as answer by joe_guo Tuesday, March 06, 2012 2:12 AM
    Monday, March 05, 2012 4:10 PM

All replies

  • Hi Joe,

    I wouldn't expect what you describe to work. The FilePicker will return a stream to the file the user selected but doesn't give access to the file itself. To load those you would need to read out the text and use NavigateToString. 

    For items within the app's package you'd use ms-appx (or better than hardcoding: use your app's BaseUri to build the URI). I would suggest hooking up the HTML in the designer first to make sure the basics work and then move to the programmatic Navigate after.

    Please give this a try and then if you still have problems let us see exactly what you were doing.

    --Rob

    Saturday, March 03, 2012 4:21 AM
    Owner
  • Just to add to Rob's note here about using ms-appx:// for your local package HTML...this currently (unfortunately) doesn't work in the Consumer Preview.  We know this and are working on identifying the root causes.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Saturday, March 03, 2012 5:10 AM
  • Thanks Rob & Tim.

    I'm developing a reader application to read EPUB3 compatible books that contain HTML5+CSS3 files as its contents.  I want to use webview.Navigate to present the local html files that are not packaged with the application.   I tired to copy the files to to the app’s local ApplicationData storage and use ms-appdata scheme,  but this doesn't work.  Does the WebView support the usage?  

    Monday, March 05, 2012 5:43 AM
  • WebView currently does not support the ms-appx, ms-appdata protocols.  It is something we are working on examining supporting.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Marked as answer by joe_guo Tuesday, March 06, 2012 2:12 AM
    Monday, March 05, 2012 4:10 PM
  • Tim,

    reading local files into WebView control (rather via file:///[path] syntax) is very important for us at Hyperionics as well. Please do add this ability... Thanks!

    Greg

    Friday, June 22, 2012 3:29 PM
  • @Greg - the contents would have to be in your package or you'd need to load the streams and use NavigateToString.  I haven't tried with using the file:/// syntax with something that is in the "My Documents" location and your app has all the required associations and capabilities though.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Friday, June 22, 2012 4:34 PM
  • Hi Tim,

    I tried both:

        wv1.Navigate(new Uri("file:///mydir/somefile.html"));

    where mydir is a subdirectory of my package, and also tried giving it an absolute path like:

         wv1.Navigate(new Uri("file:///C:/anotherdir/somefile.html"));

    and it did not work - I'm getting only an empty WebView rectangle. I'm also working with WebView control on Android, and it has no problems loading and displaying local files. NavigateToString() method is useless to me - it won't display e.g. images included with HTML files.

    Greg

     



    Friday, June 22, 2012 11:31 PM
  • @Greg - for the first one (where your HTML exists in your package) you would use:

    wv1.Navigate(new Uri("ms-appx-web:///mydir/myfile.html"));

    For the one on c:\ it will not work given the security model of Metro style apps.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Proposed as answer by Prateek Jaiswal Monday, September 10, 2012 12:19 PM
    Saturday, June 23, 2012 4:25 AM
  • OK, ms-appx-web:// works, but then I cannot delete/create files in a directory under my package location, and it won't read files from anywhere else... With all this paranoid security, it's impossible to use this thing. I think I'll stick with Android then.

    Greg

    Saturday, June 23, 2012 8:34 PM
  • Tim,

    We are porting an App from iOS/Android (that has a significant user base) that needs to display HTML/CSS/JS files downloaded from the web in a WebView. Because the files are user-specific, there is no way to place them in the Assets folder (say).

    How can I load the downloaded files programmatically into the webview?

    Thanks,

    Armando

    Tuesday, November 06, 2012 7:07 PM
  • Any news on supporting the ms-appx, ms-appdata protocols in WebView?
    Friday, November 23, 2012 1:03 AM
  • Very interesting solution: Local HTML Resources
    Sunday, April 07, 2013 7:53 PM
  • Hi Tim,

    a lot of people are still waiting for more than a year for a solution of the problem:

    How to display any stored HTML file in a WebView control?

    It's realy hard to develop and sell apps under such conditions ...  

    SunnyApril

    Monday, May 20, 2013 12:54 PM
  • With Windows Blue (8.1) the function NavigateToLocalStreamUri could probably solve the issue ;)

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.navigatetolocalstreamuri.aspx

    Thursday, June 27, 2013 10:46 AM
  • Actually @armitxes you don't need to do that in 8.1.  We now support direct Source URI to local app content:

    <WebView Source="ms-appdata:///local/myfolder/mypage.html" Width="600" Height="400" />

    Hope this helps!


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Saturday, June 29, 2013 5:35 AM
  • To be clear, this new support of ms-appdata:///local is only supported in WebView in Windows 8.1.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Monday, July 01, 2013 3:11 PM
  • My always successful method is to read the HTML into a file and then navigate to the string with Webview.

    Monday, July 01, 2013 8:33 PM
  • There is no System.IO.File namespace available in Windows RT apps in Visual Studio 2012 - how can I read the contents of a local HTML file?

    I agree with comments above - it is simply stupid that developers are not allowed to open their own HTML project files in their own application at run-time. I can do this on any other platform using any other development tool. Wake up Microsoft!


    TriSys Business Software

    Tuesday, August 06, 2013 3:12 PM
  • @TriSys - you can open your own HTML files *if they are within your package* -- the restriction in Win8 was that WebView couldn't directly render URI-based assets from the user's appdata location, only your app package location.  This is why the NavigateToString() method is used for the appdata location instances in Win8.  As I note above in Win8.1 this restriction is removed.

    There is no System.IO namespace, but you would use the Windows.Storage namespace APIs to read local files into StorageFile objects, etc.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Tuesday, August 06, 2013 3:49 PM
  • Thanks for the quick reply Tim.

    I did that and was able to get simple HTML files to display - thanks.

    I added a JQuery mobile HTML file and the necessary jquery CSS and JS files to the project, but when loading this into the web view all hell breaks loose with the app complaining about $ etc..

    My goal was to simply embed my JQuery Mobile application I have working on Android/iOS via PhoneGap without having to re-write it specifically for Windows 8 RT.

    I got around this by pointing the web view control to the same application running on our web server, but that rather defeats the point of a native app!

    Kind Regards, Garry.


    TriSys Business Software

    Tuesday, August 06, 2013 3:59 PM
  • Garry - for jQuery in your HTML app check out this information for perhaps some tips:

    http://blogs.windows.com/windows/b/appbuilder/archive/2013/07/10/jquery-and-winjs-working-together-in-windows-store-apps.aspx

    http://channel9.msdn.com/Events/Build/2013/2-161

    These are tailored more toward full apps rather than put specific content in WebView within a XAML app, but may help.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Tuesday, August 06, 2013 4:15 PM
  • Thanks Tim - I will take a look at those links.


    TriSys Business Software

    Tuesday, August 06, 2013 6:11 PM
  • Hello Tim,

    you code works fine to display the page, but it doesn't allow script execution.

    Is that normal?

    Wednesday, April 02, 2014 10:42 AM