Here is a custom component that lets you use an <iframe> to embed a URL in your app.
Just clone this app and add it as a dependency. Then create an IFrame component and set its url property (you can use the designer, or set it in code, or use a data binding):
Note: Not all websites can be embedded in iframes. Popular websites like Google and Facebook prevent embedding for security reasons. (Likewise, you can’t embed an Anvil app in another site unless you tick the box in the Publish dialog.)
Is it possible to stop the iframe from reloading the source url each time that I navigate back to the page containing the Iframe?
Currently I’m using it within my app and I set the url to https://jsoncrack.com/editor such that users of my app can easily view their large json file structure. If a user were to navigate to a different page using the anvil extras routing module and then back to the page containing the iframe, the content which they previously filled in is removed becayse the iframe reloads the source url. I’m loading the page from cache each time, and I’ve also tried putting a check within the iframe custom component form show event (self.iframe_initialized) but still, each time a user navigates back to the page containing the iframe, the Iframe is reloaded clearing all previous inputs.
Also tried playing with the javascript, but no luck yet.
class IFrame(IFrameTemplate):
def __init__(self, **properties):
self.shown = False
self._url = None
self._height = None
self.iframe_initialized = False
self.init_components(**properties)
def form_show(self, **event_args):
"""This method is called when the HTML panel is shown on the screen"""
self.shown = True
if not self.iframe_initialized:
if self._url is not None and self._url != "":
print('setting url')
self.call_js('setURL', self._url)
if self._height is not None and self._height != "":
self.call_js('setHeight', self._height)
self.iframe_initialized = True