使用按钮在iframe外部提交iframe表单
P粉316110779
2023-09-04 10:44:17
<p>我有一个contactus.html文件，其中包含一个iframe：<code><iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe></code>，其中只包含contact_inputs.php中的三个输入框。</p>
<p>我想要通过iframe外部的按钮将iframe文件中的表单提交到php_form.php。</p>
<blockquote>
<p>联系人.html</p>
</blockquote>
<pre class="brush:php;toolbar:false;"><iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe>
<form action="php_form.php" method="post">
<input type="submit" name="DoIt" value="submit">
</form></pre>
<blockquote>
<p>contact_inputs.php</p>
</blockquote>
<pre class="brush:php;toolbar:false;"><form>
<input type="" name="cn">
<input type="" name="ex">
<input type="" name="cr">
</form></pre>
在这里你可以尝试这个逻辑：
function sub(ev) { ev.preventDefault(); let frame1 = document.getElementById("frame1"); let parser = new DOMParser(); let doc = parser.parseFromString(frame1.innerHTML, "text/html"); let iframeForm = doc.body.querySelector("form"); console.log(iframeForm); //通过name属性访问表单输入字段的值 console.log(iframeForm.cn.value); }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <iframe name="myframe" id="frame1" src="contact_inputs.php"> <form id="iframe1Form"> <input type="" name="cn" value ="HELLO"/> <input type="" name="ex" /> <input type="" name="cr" /> </form> </iframe> <form onsubmit="sub(event)"> <input type="submit" name="DoIt" value="submit" /> </form> </body> </html>