Propagating all JQuery Custom events to an iframe

Question

I'm building a hardware library for a project and using JQuery to trigger status updates.

There is an object called "objectName". This object is a hash of a set of objects denoted as "objectName.childName". Part of these objects is to connect and control hardware (think barcode scanners over USB to a webpage). At the end of the connection cycle, JQuery is used to trigger a "CONNECTED" event or other objects.

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

A recent change has required us to nest the navigational components into an iframe since the hardware connection is slow and freezing the hardware page is best. This means the code asking for a connection runs inside an iframe and connects to the parent frame. The connection works and both objects in the Application/IFrame page end up on the same state but the triggered event is not propagated to the iframe from the parent frame.

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

The Question: How exactly do you capture all of the events emitted by the children of "objectName" and propagate them down to the iframe so the iframe may be notified of connections or other event types? Assume IE11 will be the target browser. The best solution would be some code that is run on the Application Page and does not modify the IFrame Page.

Here's what passing the object from one to the other looks like.

Application Page

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

IFrame Page

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

You can use `MessageChannel` or `SharedWorker` to communicate between parent frame and `` elements within parent. See [How to clear the contents of an iFrame from another iFrame](http://stackoverflow.com/questions/33645685/how-to-clear-the-contents-of-an-iframe-from-another-iframe), [How can I load a shared web worker with a user-script?](http://stackoverflow.com/questions/38810002/how-can-i-load-a-shared-web-worker-with-a-user-script/). — guest271314, Dec 14 '16 at 21:35

guest271314 · Accepted Answer · 2016-12-15T00:56:22.917

You can use sessionStorage, storage event to communicate between parent window and <iframe> within within parent window that has src attribute value set to the same origin as parent window. For example

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

Okay, I like this but I still need something that can catch all the jquery events emitted. — user2467731, Dec 15 '16 at 15:17
@user2467731 _"but I still need something that can catch all the jquery events emitted"_ Can you update Question with details an about the events including `javascript`? How are the events are initially attached? How many events? What action dispatches the events? — guest271314, Dec 15 '16 at 18:35
This is how I ended up broadcasting. `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;` — user2467731, Dec 20 '16 at 19:41

Propagating all JQuery Custom events to an iframe

1 Answers1