如何在 Anvil 中创建 iframe 组件

Anvil 是一个只用 Python 构建 Web 应用程序的平台。

在本指南中，我将向您展示如何通过三个简单的步骤在您的 Anvil 应用程序中嵌入网页。 您可以使用它来嵌入博客、图表或 PowerBI 等嵌入式分析。

我们将使用 iframe 来做到这一点，这是一种将一个网页嵌入另一个网页的方式。 Anvil 让我们可以使用 anvil.js 在 Python 代码中调用 JavaScript 函数。 我们将使用 anvil.js 创建一个 iframe 标签并将其添加到我们的页面，使用 jQuery。

让我们开始吧。

1.导入jQuery和get_dom_node

让我们从在 Anvil 应用程序表单顶部导入 jQuery 和 get_dom_node 开始。

# Add these imports to your form
from anvil.js.window import jQuery
from anvil.js import get_dom_node

2. 创建 iframe 元素

接下来，让我们创建一个 iframe 元素。 我们可以使用 jQuery 的 attr() 函数将 src 属性设置为我们想要嵌入到 iframe 中的网站。

# Create an iframe element and set the src
iframe = jQuery("<iframe width='100%' height='800px'>").attr("src","https://codingwithxxxx.com/posts")

3. 将 iframe 添加到容器中

最后，我们需要将 iframe 添加到容器组件中。

我们可以使用 jQuery 的 appendTo() 函数将 iframe 对象添加到表单中的容器中——在本例中，我将 iframe 附加到 content_panel。

我们将使用 anvil.js.get_dom_node() 来访问容器组件的 DOM 节点。

# Append the iframe to a container in our form
iframe.appendTo(get_dom_node(self.content_panel))

而已！ 我们现在需要做的就是发布我们的应用程序以查看它的运行情况。

结论

我们已经学会了如何：

• 导入 jQuery 和 get_dom_node
• 创建 iframe 元素
• 将 iframe 添加到容器中

关注七爪网，获取更多APP/小程序/网站源码资源！