IFrame component

This library contains an IFrame you can use to embed other web pages or web apps into an Anvil app. The IFrame has a url property - just set this to a URL and your page will appear!

This library is completely free to use, so click on the clone link and use it in your app. You can use it as a dependency to include it in other apps.

Here’s an example where a Tableau dashboard has been embedded into an IFrame:

And here’s a clone link for that Tablaeu example:

Cross-Origin Resource Sharing (CORS)

The page you’re embedding will need to allow Cross-Origin Resource Sharing (CORS) in order to load in your IFrame. If you control the page you’re embedding, you can use the Access-Control-Allow-Origin header in the HTTP response to allow access to your app.

Anvil apps have a checkbox that enables them to be embedded in IFrames:

Other platforms may have similar configuration options.

How it works

The IFrame is an <iframe> HTML tag in a Custom HTML Form.

On the IFrame’s show event, it calls a short JavaScript function that changes the src of the IFrame:

      self.call_js('setURL', self._url)

Here’s that JavaScript function:

  function setURL(url) {
    $(this).find("iframe").attr("src", url);
  }

The IFrame has a url property that you can set at runtime. This means the show event needs to be re-run when the url property gets set. There’s a setter function to do just that:

  @url.setter
  def url(self, u):
    self._url = u
    if self.shown:
      self.form_show()