ehmorris / listen-for-events-in-an-iframe

Does what it says on the tin

Trigger functions based on events happening inside an iFrame

(As long as you can run JavaScript inside that iFrame)

From inside the iFrame

• Include the listen-for-events-in-an-iframe script and the jschannel script

<script src="jschannel.js"></script>
<script src="listen-for-events-in-an-iframe.js"></script>

• Create a new TransmitEventsToParent instance

new TransmitEventsToParent();

From the page containing the iFrame

• Include the listen-for-events-in-an-iframe script and the jschannel script

<script src="jschannel.js"></script>
<script src="listen-for-events-in-an-iframe.js"></script>

• Create a new ListenForIFrameEventsFrom instance and pass it the iFrame element

var iframe_element = document.querySelector(".listen_for_events_in_this_iframe");
var frame = new ListenForIFrameEventsFrom(iframe_element);

• Now you can execute functions outside the iframe, based on events happening inside the iframe

frame.on("mouseover", ".content_inside_the_iframe", function(e) {
  document.querySelector(".listen_for_events_in_this_iframe").style.margin = '20%';
});

frame.on("mouseout", ".content_inside_the_iframe", function(e) {
  document.querySelector(".listen_for_events_in_this_iframe").style.margin = '0';
});

listen-for-events-in-an-iframe's Issues

Include a straightforward error when two channels use the same id

The only way this would happen is if two listeners listen for the same event on the same element — the error should say as much

Remove jschannel dependency

jschannel should be optional e.g. if you have it already you can pass a channel object, but if you don't we'll setup the postmessages for you