我有点击 iframe 内按钮时关闭表单的代码:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
$(document).ready(function(){
$("#popup1").hide();
});
window.onload=function(){
document.getElementById("popup1").contentWindow.document.getElementById("hidepopout").addEventListener("click", PopUpHide, false);
function PopUpHide(){
$("#popup1").hide();
document.getElementById("popup1").contentWindow.document.getElementById("form").reset();
}
}
</script>
</head>
<body>
<iframe class="b-popup" id="popup1" src="index2.php" title="contact form">
</iframe>
<button onclick="PopUpShow()">Contact me</button>
<script>
function PopUpShow(){
$("#popup1").show();
}
</script>
</main>
<footer></footer>
</div>
</body>
</html>
index2.php - 带按钮的 iframe 内容
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../CSS/Form.css">
<title>Contact Us</title>
</head>
<body>
<?php
if (!empty($success)) {
?>
<div class="alert alert-success">Your message was sent successfully!</div>
<?php
}
?>
<?php
if (!empty($error)) {
?>
<div class="alert alert-danger"><?= $error ?></div>
<?php
}
?>
<button id="hidepopout">✖</button>
<form id="form" method="post" action="submit.php">
<button id="sendmsg" class="btn btn-primary btn-block">Send Message</button>
</form>
</body>
</html>
如果我单击 ID 为“sendmsg”的表单按钮,该按钮不会隐藏 iframe。在这种情况下看起来没有事件处理程序。但如果我不碰这个按钮它就会起作用。
整个设置可能有效,尽管更现代的方法是使用
postMessage
方法和 message
事件。
无论如何,由于您决定将事件附加到
iframe
页面内,因此您需要等待 that 窗口加载。
例如:
<iframe onload="attachTheEvents(this)"></iframe>
<script>
function attachTheEvents(iframe) {
iframe.contentWindow.document.getElementById("etc");
}
</script>