Load html file in iframe

Load html file in iframe

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

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

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.

Answers

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

All replies

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.

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

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.

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.

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.

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.

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

Источник

How to Load HTML, CSS, and JS Code into an iFrame

If you’re just here for the answer, not the story, the solution is at the bottom. If you’ve ever used JSFiddle, Codepen, or others, this problem will be familiar to you: The goal is to take some HTML, CSS, and JS (stored as strings) and create an iframe with the code loaded inside. This problem should be easy, but it isn’t. At least. It wasn’t, until I found the golden ticket I had been waiting for all along. But more on that later. Let’s start with all the things that didn’t work, because that’s more fun.

Attempt #1: Using srcdoc

After doing a bit of research, I was thrilled to discover that it’s possible to add a srcdoc attribute to iframes. If you pass in an HTML string, the iframe will load with that HTML content inside:

 srcdoc="
This text will appear in the iframe!
"> 

1. Browser Support for srcdoc is not great

If we want to support IE or Edge, we’ll need a different approach (or a polyfill).

2. It’s possible to «escape» from CSS/JS

function setIframeContent(iframe,  html, css, js >)  const source = `  $css>  $html> $js>   ` iframe.srcdoc = source > 

The problem? When writing CSS or JS, it’s possible to «escape» out into HTML land, simply by including

or in the code, respectively. This bug is actually quite common; both JSFiddle and Codepen are affected:

Attempt #2: Serverless Boomerang

To fix the browser support issue, let’s replace srcdoc with a regular src attribute. In order to do this, we’ll need to pass a real URL instead of just code. Perhaps we can set up a page which takes HTML, CSS, and JS «GET» parameters and spits out the same type of page as before, but this time loaded from an actual URL. This is a perfect time to use a serverless architecture, because we just want a single endpoint that does one thing. Here’s my attempt:

module.exports = (req, res) =>  // Code comes from GET params in URL const  html = '', css = '', js = '' > = req.query // Generate and send HTML page return res.send(`  $css>  $html> $js>   `) > 

1. «Escaping» from CSS/JS into HTML is still a problem
2. The entire source code is passed in a URL, which isn’t ideal.

Attempt #3: Serverless Boomerang (redux)

Our first boomerang solved the browser support problem, but still has the «escaping» issue to deal with.

Fortunately, due to the way that we pass in the code, this can actually be solved. Rather than inserting the CSS and JS into the page on the server, we can do it on the client! This works because the URL GET parameters are still accessible to the client’s computer.

The source here is a bit longer, but it does work:

module.exports = (req, res) =>  return res.send(`     $req.query.html || ''>  `) > 

Now, if a script or style includes scary HTML characters, the browser will handle them for us when inserting said script/style into the document.

This solution is. fine. It works, technically. But we still have the soft URL length limit to consider. Plus, we’re now dealing with something server-side that feels like it should happen on the client.

There must be a better way.

Solution: Blob URLs

This entire time, we’ve been trying to simulate loading data from a URL:

• First we used srcdoc to load data instead of loading from a URL
• Then we used the boomerang to load code from a URL
• Next we updated our boomerang to attempt to simulate the «loading CSS/JS from an external URL» behavior, despite every resource coming from one URL.

It turns out that Javascript has a feature to do just this: Blob URLs.

Blobs

We can use the Blob constructor to create a pseudo-file. It’s not a real file loaded from disk or from a URL — it’s just stored in memory. But in many ways, it functions just like a real loaded file.

Then, we can use URL.createObjectURL(blob) to create a URL that can be used to load the contents of the blob.

Here’s how that works in practice:

const getBlobURL = (code, type) =>  const blob = new Blob([code],  type >) return URL.createObjectURL(blob) > console.log(getBlobURL('
My webpage', 'text/html')) // blob:https://dev.to/9ca05e31-05ea-48f8-838d-cc1ad0949ec8 

Try running the above code in the console to see it for yourself! It will log a URL. If you paste the URL into a new tab (including the blob: bit at the beginning), it will load a page containing the HTML.

Notice the ‘text/html’ passed to getBlobURL ? We can change that too. Generating a CSS or JS blob is easy: Just pass text/css or text/javascript respectively.

Another benefit of blob URLs is that they stick around, and can be accessed any way that you would access a regular URL. Which means that we can actually load our CSS and JS files from a separate URL, so the «escaping» trick is no longer a problem.

Here’s a bare-bones implementation of this in practice:

const getGeneratedPageURL = ( html, css, js >) =>  const getBlobURL = (code, type) =>  const blob = new Blob([code],  type >) return URL.createObjectURL(blob) > const cssURL = getBlobURL(css, 'text/css') const jsURL = getBlobURL(js, 'text/javascript') const source = ` $css && `$cssURL>" />`> $js && ``> $html || ''>  ` return getBlobURL(source, 'text/html') > const url = getGeneratedPageURL( html: '
Hello, world!', css: 'p ', js: 'console.log("hi")' >) const iframe = document.querySelector('#iframe') iframe.src = url 

Oh, and browser support for Blob URLs is much better than srcdoc. 😉

The Moral?

Don’t fight the language, I guess.

I knew what I wanted to do: Load data from URLs. It just never occurred to me to look for a non-hacky way to do just that!

Источник