Flutter Web 嵌入表单使用 js答案

【问题标题】：Flutter web embed form using jsFlutter Web 嵌入表单使用 js
【发布时间】：2022-10-18 22:22:44
【问题描述】：

我正在尝试将https://convertkit.com/ending-a-business-relationship 的表单嵌入到我的颤动网页中。这非常困难，我似乎无法弄清楚为什么没有像 Flutter 应用程序这样的简单系统。

到目前为止，我已经这样设置它：

class MyDesktopBody extends StatelessWidget {
  const MyDesktopBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final currentWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBarDesktop(),
      body: Center(
        child: Iframe(),
        // child: Text(
        //   "COMING SOON!",
        //   style: Theme.of(context).textTheme.bodyLarge,
        //   textAlign: TextAlign.center,
      ),
    );
  }
}

class Iframe extends StatelessWidget {
  Iframe() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory('iframe', (int viewId) {
      var iframe = html.IFrameElement();


      return iframe;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 800, height: 600, child: HtmlElementView(viewType: 'iframe'));
  }
}

但是，这给了我以下错误：

Refused to display 'https://app.convertkit.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

我读到有人说要添加嵌入，但这只会导致网站出现 404。真的没有简单的方法可以使用 js 嵌入来自另一个站点的表单用于颤振网站吗？

提前致谢！

【问题讨论】：

标签： javascript flutter dart

【解决方案1】：

使用 Flutter 时，您可能应该使用 webviewx 之类的 webview 小部件，而不是使用 dart:html 和朋友！

但这可能无法解决实际的错误消息，因为这意味着 Convertkit 禁止您将该 URL 嵌入到 <iframe>!你需要check with Convertkit how to embed correctly。

同源

页面只能显示在与页面本身同源的框架中。

来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

【讨论】：