在 React 中向 iFrame 发送表单响应答案

【问题标题】：Sending a form response to an iFrame in React在 React 中向 iFrame 发送表单响应
【发布时间】：2020-07-31 00:29:32
【问题描述】：

我正在尝试将嵌入式 Mailchimp 注册表单的响应发送到隐藏的 iFrame，以防止表单打开表单action 中包含的链接。我正在使用 React，标准方法似乎不起作用。我有：

<div class="embedSignup">
 <form action="https://app.usXX.list-manage.com/subscribe/post" method="post" formTarget="hiddenFrame">
  // ... form elements
 </form>
</div>
<iframe name="hiddenFrame" src="about:blank" style={{display:"none"}}></iframe>

但它仍然默认为target="_self" 行为。

我尝试过使用target、formtarget 和formTarget，但都没有奏效。

非常感谢任何帮助。

【问题讨论】：

如果表单正常提交，target 应该这样做。但是，如果反应干扰，阻止正常的表单提交，并将其改为 AJAX 请求（？） - 那么你必须检查文档，我想，然后如何处理目标特定结果窗口/框架。
（MailChimp 也有这类东西的 API。使用你自己的表单可能更有意义，你只需提交到你的应用程序，然后在后台处理其余的...... ?)
是的，@CBroe；事实证明target 正在工作。由于我仍然不清楚的原因，我必须遵循this question 的答案之一中讨论的协议才能真正让它工作。（简而言之，包括一个c=? 值并在网址末尾使用post-json 而不是post。）我希望那里有一个更清晰的答案，但这个确实有效。

标签： reactjs forms iframe mailchimp

【解决方案1】：

您可以使用srcdoc 属性。它允许您指定 iframe 的内容。

<iframe srcdoc="<p>Your html</p>"/>

请不要忘记，srcdoc 对浏览器的支持非常有限，有一个 polyfill 可用，但在这种情况下它没有用，因为它需要允许脚本，这是不安全的。

在这种情况下，我们可以使用 document.open() 和 write() 函数来创建自定义 iframe。

import React from 'react';

const IframeSigninForm = (props) => {
   let iref = null;
   const writeHTML = (frame) => {
   
   if (!frame) {
     return;
   }

   iref = frame;
   let doc = frame.contentDocument;
   doc.open();
   doc.write(props.content);
   doc.close();
   frame.style.width = '100%';
   frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`;
 };

 return <iframe src="about:blank" scrolling="no" frameBorder="0"  ref{writeHTML}/>
};

export default IframeSigninForm;

最后，您可以使用自己的组件，例如；

import IframeSigninForm from './IframeSigninForm';

<IframeSigninForm content={ <form action="https://app.usXX.list-manage.com/subscribe/post" method="post" formTarget="hiddenFrame"></form>} />

【讨论】：