SECRET OF CSS

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


How to create an iframe component in Anvil

0*LlN6r1eM5zBSJ9Q9
Photo by Andrew Lkhtk on Unsplash

Anvil is a platform for building web apps with nothing but Python.

In this guide, I’ll show you how to embed a webpage in your Anvil app with just three simple steps. You can use this to embed blogs, charts, or embedded analytics like PowerBI.

1*E HL3mL XtG1uuZrLmPBdQ
A webpage embedded in an Anvil app

We’ll do this using an iframe which is a way of embedding one webpage inside another. Anvil lets us call JavaScript functions in Python code using anvil.js. We’re going to use anvil.js to create an iframe tag and add it to our page, using jQuery.

Here’s a link if you would like to clone a finished example:

Let’s get started.

Let’s start by importing jQuery and get_dom_node at the top of our Anvil app’s form.

1*GLUXj4nSvXk5 KgT784bCA
Import at the top of your form

Next, let’s create an iframe element. We can use jQuery’s attr() function to set the src attribute to the website we would like to embed in our iframe.

1*LgA9abOpon3Zm0zH5t4qgw
Add iframe and set src attribute

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

We can use jQuery’s appendTo() function to add the iframe object to a container in our form — in this example, I’m appending the iframe to the content_panel.

We will use anvil.js.get_dom_node() to access the DOM node for the container component.

Add iframe to an Anvil container component

That’s it! All we need to do now is publish our app to see it in action.

Find the Publish button at the top-right of the editor:

0*ygj8MRdGSjOgyDyX

When you click it, you will see this dialog:

0*BubegL7Rwbnr FdN

Click Publish This App, and you will see that your app has been deployed at a new, public URL. Here’s an image:

0*CNnemAIxbIlN Oz

We’ve learnt how to:

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

Here’s a link if you would like to clone a finished example:

Thanks for reading!



News Credit

%d bloggers like this: