使用 IFrame 在 jQuery 中传播事件

Question

我有一个名为 first.html 的 html 文件，它有一个 iframe 元素来加载另一个名为 的 html 文件second.html。我们如何在这两个 html 文件之间进行通信。我试图从 second.html 触发一个事件并在 first.html 上捕获相同的事件。但是事件传播不成功。

这是first.html文件

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" /> 
<script>
   function onLoad(){
      alert("onLoad");
      var iframe = $('#iframeID').contents();
      iframe.find("#button").on("SUBMIT",function(){
          // business logic
          alert("Clicked");
      });
   }
</script>
</head>
<body>
   <iframe id="iframeID" onload="onLoad()" height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>

这里是second.html文件

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" />
    <script>
        function myFunction(){
            $('#button').trigger("SUBMIT");
        };
    </script>
</head>
<body>
    <button id="button" type="button" onclick="myFunction()">Click me</button>
</body>
</html>

Answer 1

您不能使用jquery进行交流，因为事件冒泡停止在文档的根目录，即 iframe 容器，并且不会到达主机文档。您可以使用Post消息进行交流。

试试这个代码吧。

这是 first.html 文件。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

 // addEventListener support for IE8
        function bindEvent(element, eventName, eventHandler) {
            if (element.addEventListener){
                element.addEventListener(eventName, eventHandler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + eventName, eventHandler);
            }
        }

 // Listen to message from child window
        bindEvent(window, 'message', function (e) {
           alert("Got the message from child");
        });
</script>
<body>
   <iframe   name="iframeID"   height="1000" width="1000" src = './second.html'></iframe>
</body>
</html>

second.html

<!DOCTYPE html>
<html>
<body>
  <head>

<button id="button" type="button" onclick="myFunction()">Click me</button>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"/>
 <script>

    function myFunction(){
    var message = 'Send the message to parent ';
       window.parent.postMessage(message, '*');
     };

 </script>
 </body>
</html>

使用 IFrame 在 jQuery 中传播事件

Event propagation in jQuery with IFrame

javascript

iframe

jquery

event-handling

jquery-events