webview和iframe的区别以及flutter上的用例

Question

我想知道 webview 和 iframe 之间的区别以及它们在 flutter 中的相应用例。

根据我的理解，iframe 主要用于 flutter web 以嵌入一些其他源代码，并且只能通过具有 iframe 作为子级的 webview 用于 flutter android 或 ios 应用程序。它是否正确？如果是这种情况，为什么不只使用 webview 在 flutter web 和 android、ios 上显示我想要的内容并避免代码复杂化？ webview 在 flutter web 上不可用吗？我什么时候应该使用其中之一？

谢谢。

Answer 1

WebView 和 IFrame 都用于将内容从一个网站或 Web 应用程序嵌入到另一个网站或 Web 应用程序中。但是，它们在工作方式和最佳用途方面存在一些差异。

在 Flutter 中，WebView 是一个 widget，可用于在应用程序内显示网页内容，而 IFrame 不直接支持。相反，您可以使用 WebView 小部件来显示包含 IFrame 的 Web 内容。

WebView 和 IFrame 的一些区别：

内容加载： WebView 将网站或 Web 应用程序的内容直接加载到本机应用程序中。另一方面，IFrame 在网页的框架内加载另一个网站或 Web 应用程序的内容。

安全性： WebView 可以访问特定于设备的功能，例如相机或位置，如果不小心实施，可能会带来安全风险。 IFrame 通常被认为更安全，因为它们在沙盒环境中运行并且无法访问父窗口或设备的本机功能。

自定义： 使用 WebView，您可以更好地控制 Web 内容在您的应用程序中的显示方式。您可以自定义 WebView 小部件的用户界面、行为和外观。使用 IFrame，您对内容在框架内的显示方式的控制有限。

WebView 在 Flutter 中的用例包括：

在您的应用程序中显示网站的移动版本。 在您的应用程序中嵌入基于 Web 的应用程序。 显示包含交互式功能（例如表单或视频）的 Web 内容。

Flutter 中 IFrame 的用例包括：

在网页中嵌入第三方内容，例如地图或社交媒体提要。 在较大的网站或网页中显示来自基于 Web 的应用程序的内容。 在网页中显示来自不同域或网站的内容。

Answer 2

当您想在 Flutter 移动应用程序中使用它时，

WebView

小部件通常用于包含一个

iframe

。

iframe

• 使用

  iframe

  HTML 元素，您可以将来自其他网站或网页的内容包含到您自己的网站或网页中。
• 它可用于集成第三方小部件或工具，或显示来自其他网站或企业的材料。
• 但是，由于 iframe 中的材料与您网站的其余部分是分开的，因此其个性化和交互性受到限制。
• https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html

Webview

• 可以使用本机组件 WebView 在您的移动应用程序中显示在线信息。
• 由于您可以使用本机代码与网站内容进行交互，并且可以更好地控制它的显示和组织方式，因此它比 iframe 更强大、适应性更强。 但如果不使用，它可能会出现安全和性能问题，并且更难设置。
• https://pub.dev/packages/webview_flutter

用例：

• iframe

  是一个合适的选择，如果您需要做的就是将外部材料嵌入网页（如 YouTube 视频或 Twitter 提要）而无需与之交互或以任何方式修改它。
如果您想更好地控制材料的显示方式和交互方式，或者如果您正在开发必须显示在线内容的移动应用程序，

• WebView

  是更好的选择。

注意：不像

iframe

只在网络平台上可用，

WebView

同时支持Flutter移动和网络平台。因此，如果你想在网络和移动设备上显示外部信息，你必须使用

WebView

。