向React中的iFrame发送表单响应

Question

我试图将嵌入的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，但都不起作用。

非常感谢您的帮助。

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