2018-03-05 10:34:55 +00:00
<!doctype html>
< html >
< head >
2018-03-05 10:49:13 +00:00
< title > Subscribe to events from pad.ma iframe embed< / title >
2018-03-05 10:34:55 +00:00
< / head >
< body >
2018-03-06 12:36:25 +00:00
< iframe width = "640" height = "360" src = "http://10.0.3.230/A/editor/C#embed" frameborder = "0" allowfullscreen id = "padembed" > < / iframe >
2018-03-05 10:49:13 +00:00
< button id = "setUrl" >
Set Iframe URL
< / button >
< div id = "messages" >
< / div >
2018-03-05 10:34:55 +00:00
< script >
2018-03-05 10:49:13 +00:00
const $iframe = document.getElementById('padembed');
2018-03-05 10:34:55 +00:00
2018-03-05 10:58:33 +00:00
/*
Listen to all messages received by iframes on the page.
*/
2018-03-05 10:34:55 +00:00
window.addEventListener('message', listener, false);
2018-03-05 10:58:33 +00:00
/*
Log all messages received from the iframe.
*/
2018-03-05 10:34:55 +00:00
function listener(event) {
const data = JSON.parse(event.data);
if (data.event === 'init') document.getElementById(data.target).isInit = true;
console.log('received event', event);
2018-03-05 10:49:13 +00:00
const $message = document.createElement('div');
$message.innerHTML = event.data;
document.getElementById('messages').appendChild($message);
2018-03-05 10:34:55 +00:00
}
2018-03-05 10:58:33 +00:00
/*
Event handler for clicking on button to set the URL of the iframe.
*/
2018-03-05 10:49:13 +00:00
document.getElementById('setUrl').addEventListener('click', function(e) {
console.log('clicked button');
$iframe.contentWindow.postMessage(JSON.stringify({
data: {
2018-03-06 12:36:25 +00:00
url: '/A/editor/00:00:55.800#embed'
2018-03-05 10:49:13 +00:00
},
event: 'seturl'
}), '*');
});
2018-03-05 10:34:55 +00:00
$iframe.addEventListener('load', () => {
let timeout;
2018-03-05 10:58:33 +00:00
/*
We can't be sure that the JS inside the iframe will be fully loaded and ready to receive messages. Therefore, we need to keep resending the init event until we are sure we've received the acknowledgement reply from the embed. This function calls itself every 250ms until `isInit` on the iframe object is set to true. The listener above sets this to true once it received the init acknowledgement.
*/
2018-03-05 10:34:55 +00:00
function init() {
console.log('init called');
if ($iframe.isInit) {
clearTimeout(timeout);
return;
}
$iframe.contentWindow.postMessage(JSON.stringify({
data: {
oxid: 'padembed'
},
event: 'init'
}), '*');
timeout = setTimeout(init, 250);
}
init();
});
< / script >
< / body >
< / html >
