Open local HTML file in Iframe from AppFolder in WinJS

Question

 Hi,
    I am writing Windows store app using WinJS Library. I am using IFrame to load Local HTML files.

<iframe id="iframe_Id" onload="Load();" src="/html/OPS/chapter_001.xhtml"></iframe>

Here the file contains in my Solution Explorer.

But I want to open from my app folder which is path :

C:\Users\User\AppData\Local\Packages\c1c70291-897c-4c49-9efc-e2bfe03de92f_vkg0nyxnnp64t\LocalState\Cinderella_Or_The_Little_Glass_Slipper\OPS\000Title.html

 So opening appfolder I am doing like this

<iframe id="iframe_Id" onload="Load();" src="ms-appdata:///Cinderella_Or_The_Little_Glass_Slipper/OPS/000Title.html"></iframe>

But it is not working at all. I know I can load Local HTML files suggested from here

Please suggest me. I got struck here.

Thanks

---

devendra

Answer 1

iframe doesn't support ms-appdata URIs. You have to use the x-ms-webview element instead.

Kraig

Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft
Press. First edition (for Windows 8) also available.

Answer 2

    WebView is not suitable for my project. Basically my project is Reader which contains Local HTML files 

1. I can't handle zoom in webview
2. I want to navigate Horizontally HTML files.

  So, Please suggest me to the way I can do using Iframe

I know for security reasons it is not allowed to Load Local HTML content. But I want to load Data from my project appfolder. I hope there is a way to do. Please mention to me

---

devendra

Answer 3

You'd have to have a script running in the iframe that received the local HTML content through postMessage, then parsed it directly and made calls to appendChild and so forth to create the elements. Loading local files was never a scenario that iframe supported in an easier way, which is why Webview was added for JavaScript apps. I would suggest that you try to solve your Webview problems unless again you want to write your own parser. But ask those questions in a new thread to keep the answers focused.

Answer 4

 Hello Kraig,       

 I really did n't get what I suppose to do. These are what you are suggested to do. 

Loading local files was never a scenario that iframe supported in an easier way, which is why Webview was added for JavaScript apps.

For purely local content you can use an IFrame. If your content is web-based then you will want to load this in the (new for Windows 8.1) WebView control (see the HTML WebView control sample ). --Rob

  & as you said "try to solve your problems"  

AFAIK In WebView of windows 8.1 can't disable zoom & I didn't see any documentation about getting gestures[Tap,Swipe gestures] from webvew.



 

---

devendra

Answer 5

Yes, the interface between an app and Webview is limited by design. For things like zoom and other gestures, they need to be handled in the Webview rather than the app. You should be able to disable zooming in the Webview with the -ms-content-zoom: none style on the content *in* the Webview, not the Webview itself. Similarly, panning can be set up (including -ms-scroll* styles) in the Webview as well. With other gestures, you have to pick them up in the Webview first. If you want to communicate with the app, you then need to do window.external.notify to get information to the app, which has to then pass information back via the webview's invokeScriptAsync method.

In other words, handle as much as you can inside the Webview directly, as you can insert scripts however you want in everything you load there.

Answer 6

 Hi Kraig, 
I thought to edit my question but before that I got the reply,Thanks for reply; 

I used window.external.notify & invokeScriptAsync before. I can look in WebView now. Can you provide any weblink relevant to Gestures from webview.. How can I pick gesture from Webview.

& We don't have WebVew in windows 8 which is in Windows 8.1.
So if I create build for Windows 8 systems is it work...

Apart from this here I want to discuss my app flow.. 

When I invoke item in ListView it will navigate to my appFolder & open particular folder, get List of HTML file names. Using that HTML file List I want to display in Control.

<iframe id="iframe_Id" onload="Load();" src="ms-appdata:///Cinderella_Or_The_Little_Glass_Slipper/OPS/000Title.html"></iframe>

not like directly Load using url of HTML file using src attribute of IFrame[as in code].

    Why I am explaining this is, I did everything using IFrame as suggested by MSFT employee. It will be tough to go back to WebVew

In other words, If I use KnownFolders[Documents folder] to place my HTML files or placing in Installed location of project rather than appFoder; Is it IFrame support...

Edit:
 One more thing " I don't have any script in my HTML files in appFolder " 

 please clarify for me. 

---

devendra

Answer 7

Like I said, if you're using an iframe for local HTML content, then you'll need to do all the parsing of that content directly and build the DOM tree through DOM API calls. Same with handling any other events and so forth inside the iframe. This just isn't an easily supported scenario in Windows 8.

That said, if you're going to all the trouble to parse and build the DOM, don't even bother with an iframe and just read the file and build the DOM in <div> in your app directly. Then you have all the gesture control you want.

In short, iframe just isn't going to be helpful here. Using Webview in 8.1 if you can target that is the best answer, and is why Webview was added in 8.1. As for handling gestures and other events in the Webview, like I said, you have to handle those events in JS code running in the Webview, as you cannot do it from the app that hosts the Webview.