3 Simple Steps to Embed a Webpage in an Anvil App | by Coding With Ryan | Jun, 2022

Methods to create an iframe element in Anvil

Picture by Andrew Lkhtk on Unsplash

Anvil is a platform for constructing internet apps with nothing however Python.

On this information, I’ll present you how one can embed a webpage in your Anvil app with simply three easy steps. You should utilize this to embed blogs, charts, or embedded analytics like PowerBI.

A webpage embedded in an Anvil app

We’ll do that utilizing an iframe which is a means of embedding one webpage inside one other. Anvil lets us name JavaScript features in Python code utilizing anvil.js. We’re going to make use of anvil.js to create an iframe tag and add it to our web page, utilizing jQuery.

Right here’s a hyperlink if you want to clone a completed instance:

Let’s get began.

Let’s begin by importing jQuery and get_dom_node on the prime of our Anvil app’s form.

Import on the prime of your kind

Subsequent, let’s create an iframe factor. We will use jQuery’s attr() perform to set the src attribute to the web site we wish to embed in our iframe.

Add iframe and set src attribute

Lastly, we have to add the iframe to a container component.

We will use jQuery’s appendTo() perform so as to add the iframe object to a container in our kind — on this instance, I’m appending the iframe to the content_panel.

We’ll use anvil.js.get_dom_node() to entry the DOM node for the container element.

Add iframe to an Anvil container element

That’s it! All we have to do now’s publish our app to see it in motion.

Discover the Publish button on the top-right of the editor:

While you click on it, you will note this dialog:

Click on Publish This App, and you will note that your app has been deployed at a brand new, public URL. Right here’s a picture:

We’ve learnt how one can:

  • Import jQuery and get_dom_node
  • Create the iframe factor
  • Add the iframe to a container

Right here’s a hyperlink if you want to clone a completed instance:

Thanks for studying!

More Posts