在 React 中向 iFrame 发送表单响应

Question

我正在尝试将嵌入式 Mailchimp 注册表单的响应发送到隐藏的 iFrame，以防止表单打开包含在表单 action 中的 link。我在 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，并且 none 有效。

非常感谢任何帮助。

Answer 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>} />

在 React 中向 iFrame 发送表单响应

Sending a form response to an iFrame in React

reactjs

forms

iframe

mailchimp