Question

我正在为项目构建一个硬件库，并使用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

Answer 1

您可以使用sessionStorage，storage事件在具有window属性值的父<iframe>内的父window和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>

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

将所有JQuery Custom事件传播到iframe

1 个答案: