Javascript 将所有JQuery自定义事件传播到iframe_Javascript_Jquery_Iframe

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

javascript jquery iframe

Javascript 将所有JQuery自定义事件传播到iframe,javascript,jquery,iframe,Javascript,Jquery,Iframe,我正在为一个项目构建一个硬件库，并使用JQuery触发状态更新有一个名为“objectName”的对象。此对象是一组对象的散列，表示为“objectName.childName”。这些对象的一部分是连接和控制硬件（比如通过USB将条形码扫描仪连接到网页）。在连接周期结束时，JQuery用于触发“已连接”事件或其他对象 $(this.childName).trigger("CONNECTED"); //This is the call that fails to propagate (call

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

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

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

最近的一项更改要求我们将导航组件嵌套到iframe中，因为硬件连接速度慢，冻结硬件页面是最好的。这意味着请求连接的代码在iframe内部运行，并连接到父帧。连接起作用，应用程序/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

您可以使用

会话存储

，

存储

事件在父

窗口

和父

窗口

内的

之间进行通信，父

窗口

的

属性值设置为与父窗口
相同的原点。比如说
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>






点击


$（函数（）{
$（“#触发器”）。在({
“已连接”：功能（e）{
setItem（“消息”，“已连接事件已触发”）；
},
“单击”：函数（）{
$（此）.trigger（“已连接”）
}
})
})
localStorage.clear（）；
var按钮=document.querySelector（“按钮”）；
var textarea=document.querySelector（“textarea”）；
window.addEventListener（“存储”，函数（e）{
if（sessionStorage.getItem（“消息”）！=“”）{
console.log（e.newValue）；
textarea.labels[0]。innerHTML+=“
”
+getItem（“消息”）；
setItem（“message”和“”）；
}
});
addEventListener（“单击”，函数（）{
setItem（“message”，textarea.value）；
textarea.value=“”；
})

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>


点击


var按钮=document.querySelector（“按钮”）；
var textarea=document.querySelector（“textarea”）；
window.addEventListener（“存储”，函数（e）{
if（sessionStorage.getItem（“消息”）！=“”）{
console.log（e.newValue）；
textarea.labels[0]。innerHTML+=“
”
+getItem（“消息”）；
setItem（“message”和“”）；
}
});
addEventListener（“单击”，函数（）{
setItem（“message”，textarea.value）；
textarea.value=“”；
})

plnkr
您可以使用MessageChannel
或SharedWorker
在父帧和父帧中的
元素之间进行通信。请看，。好的，我喜欢这个，但是我仍然需要一些可以捕获所有发出的jquery事件的东西。@user2467731“但是我仍然需要一些可以捕获所有发出的jquery事件的东西”您可以用事件的详细信息更新问题，包括javascript
？活动最初是如何附加的？有多少个项目？是什么动作在播送这些事件？我就是这样结束广播的<代码>var oldTrigger=jQuery.event.trigger；//存储原始JQuery触发器处理程序。window.requestObject=function（child）{window.child=child；//重写JQuery触发器处理程序。JQuery.event.trigger=function（event，data，elem，onlyhandler）{window.child.JQuery.event.trigger（event，data，elem，onlyhandler）；//将JQuery触发器广播到iframe//oldTrigger（事件、数据、元素、onlyHandler）；//关闭根页触发器。}返回对象；