将所有 JQuery 自定义事件传播到 iframe答案

【问题标题】：Propagating all JQuery Custom events to an iframe将所有 JQuery 自定义事件传播到 iframe
【发布时间】：2016-12-14 21:32:19
【问题描述】：

我正在为一个项目构建一个硬件库并使用 JQuery 来触发状态更新。

有一个名为“objectName”的对象。该对象是一组对象的散列，表示为“objectName.childName”。这些对象的一部分是连接和控制硬件（想想通过 USB 到网页的条形码扫描仪）。在连接周期结束时，使用 JQuery 触发“CONNECTED”事件或其他对象。

$(this.childName).trigger("CONNECTED"); 
//This is the call that fails to propagate (called within the objectName)

最近的一项更改要求我们将导航组件嵌套到 iframe 中，因为硬件连接速度很慢，最好冻结硬件页面。这意味着请求连接的代码在 iframe 内运行并连接到父框架。连接有效，Application/IFrame 页面中的两个对象最终处于相同状态，但触发的事件不会从父框架传播到 iframe。

Application Page (Frozen) -> IFrame Page (Navigational Components)

问题：您究竟如何捕获“objectName”的子级发出的所有事件并将它们向下传播到 iframe，以便 iframe 可以收到连接或其他事件类型的通知？假设 IE11 将是目标浏览器。最好的解决方案是在应用程序页面上运行一些代码，并且不修改 IFrame 页面。

这是将对象从一个传递到另一个的样子。

申请页面

window.requestObject = function (){
    return objectName; //This is within the Application Page.
 }

IFrame 页面

window.objectName = window.parent.requestObject(); 
// This is called on every iframe navigation

【问题讨论】：

您可以使用MessageChannel 或SharedWorker 在父框架和父框架内的<iframe> 元素之间进行通信。请参阅How to clear the contents of an iFrame from another iFrame、How can I load a shared web worker with a user-script?。

标签： javascript jquery iframe

【解决方案1】：

您可以使用sessionStorage、storage 事件在父window 内的父window 和<iframe> 之间进行通信，该src 属性值设置为与父window 相同的来源。例如

index.html

<body>
  <input type="button" 
         id="trigger" 
         value="Trigger CONNECTED event, send message to IFRAME">
  <br>
  <iframe src="iframe.html"></iframe>
  <br>
  <textarea id="parent"></textarea>
  <button>click</button>
  <br />
  <label for="parent"></label>
  <script>
    $(function() {
      $("#trigger").on({
        "CONNECTED": function(e) {
          sessionStorage.setItem("message", "CONNECTED event triggered");
        },
        "click": function() {
          $(this).trigger("CONNECTED")
        }
      })

    })

    localStorage.clear();
    var button = document.querySelector("button");
    var textarea = document.querySelector("textarea");
    window.addEventListener("storage", function(e) {
      if (sessionStorage.getItem("message") !== "") {
        console.log(e.newValue);
        textarea.labels[0].innerHTML += "<br>" 
                                     + sessionStorage.getItem("message");
        sessionStorage.setItem("message", "");
      }
    });
    button.addEventListener("click", function() {
      sessionStorage.setItem("message", textarea.value);
      textarea.value = "";
    })
  </script>
</body>

iframe.html

<body>
  <textarea id="messageFrame"></textarea>
  <button>click</button>
  <br />
  <label for="messageFrame"></label>
  <script>
    var button = document.querySelector("button");
    var textarea = document.querySelector("textarea");
    window.addEventListener("storage", function(e) {
      if (sessionStorage.getItem("message") !== "") {
        console.log(e.newValue);
        textarea.labels[0].innerHTML += "<br>" 
                                     + sessionStorage.getItem("message");
        sessionStorage.setItem("message", "");
      }
    });

    button.addEventListener("click", function() {
      sessionStorage.setItem("message", textarea.value);
      textarea.value = "";
    })
  </script>
</body>

plnkrhttp://plnkr.co/edit/Oq9pgQgWlVZ6SupzSX61?p=preview

【讨论】：

好的，我喜欢这个，但我仍然需要能够捕获所有发出的 jquery 事件的东西。
@user2467731 “但我仍然需要能够捕获所有发出的 jquery 事件的东西” 您能否更新 Question 并提供有关事件的详细信息，包括 javascript？事件最初是如何附加的？有多少事件？什么操作分派事件？
这就是我最终广播的方式。 var oldTrigger = jQuery.event.trigger; // Store the original JQuery trigger handler. window.requestObject = function (child){ window.child = child; //Override the JQuery trigger handler. jQuery.event.trigger = function (event, data, elem, onlyHandlers){ window.child.jQuery.event.trigger(event, data, elem, onlyHandlers); // Broadcast the JQuery triggers to the iframe. //oldTrigger(event, data, elem, onlyHandlers); //Kill off the root page trigger. } return object;