Iframe with local URI on android/ios

Hi,

I would like to display an HTML document that has been loaded from a URL (I’m aware of the security implications).

Currently I see two options for this:

  • create an iframe and display the content from the URL
  • download the HTML and set it as innerHTML. Since my app uses React, this means calling dangerouslySetInnerHTML

I’ve implemented both and they work fine.
But so far this is just a React web app. Once everything is more or less in place I would like to migrate it to Capacitor with Ionic.
At that point, I would then like to download the HTML and store it locally, to allow the app to work offline.

How would this work with the iframe? Is it possible to pass a local URI for the source? The Capacitor Filesystem API would make it easy to get a URI, but I don’t understand how that interfaces with the web code inside of the app.

I’m asking because I’m unsure how to continue with the prototyping. I feel like the iframe is a cleaner approach. But dangerouslySetInnerHTML would work just the same with HTML that I’ve loaded from a local file.

1 Like

@lhk Did you find any solution for your request?

I would like to do a similar thing.

Hey, it’s the same lhk, but with a different login (now via github).

This problem of displaying dynamic HTML content in React turned out to be a horrible mess.
Both approaches, iframe and dangerouslySetInnerHTML, work well at first.
But then I needed to insert some UI components into this dynamically loaded HTML.
These UI components exist in other parts of the app as well (some custom labels, buttons, information widgets). I already had the UI component code for them, and of course it’s written in React.

This means that there’s an outer React app, which on some routes displays dynamic content, and inside of this dynamic content I need to have React components.
It’s nested:
A react virtual dom that contains HTML which contains more virtual doms.

This doesn’t work. I think the biggest problem was broken event propagation.

I’m still not sure how to do this properly.
In my scenario, the dynamic HTML content was actually not really dynamic. The app works as some kind of archiving tool, where I need to display html content that has been collected.
It’s a lot of HTML, but it doesn’t change very often, so I could convert it all to tsx and load it on demand (asynchronously).

If you have truly dynamic content, but don’t need to have React inside, then I think you don’t have to worry, it should work.
If you need custom UI inside, then you’ll have to recreate those components with “vanilla” Javascript.
Or maybe a web component compiler, I guess Stencil might be a good fit.
But you’ll struggle to keep the “look and feel” consistent.

I think if I had to start from scratch, I’d give Svelte a very close look.
As far as I understand, it doesn’t build a virtual DOM, instead it’s all web components.
That should play very well with dynamically loaded HTML.
Maybe stencil would also be good for this
Though back when I evaluated stencil for my projects, it had lots of bad surprises (lack of support for sourcemaps being the biggest issue).