点击 iframe 中的表单按钮后,EventListener 不起作用

问题描述 投票:0回答:1

我有点击 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">&#10006;</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。在这种情况下看起来没有事件处理程序。但如果我不碰这个按钮它就会起作用。

javascript php html iframe
1个回答
0
投票

整个设置可能有效,尽管更现代的方法是使用

postMessage
方法和
message
事件。

无论如何,由于您决定将事件附加到

iframe
页面内,因此您需要等待 that 窗口加载。

例如:

<iframe onload="attachTheEvents(this)"></iframe>
<script>
function attachTheEvents(iframe) {
  iframe.contentWindow.document.getElementById("etc");
}
</script>
© www.soinside.com 2019 - 2024. All rights reserved.