Methods to create an iframe element in Anvil
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.
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.
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.
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.
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!
