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>
|
|
|
|
|
<iframe id="padembed" width="640" height="360" name="iframename" src="https://pad.ma/AGR/editor/00:04:55.800,00:00:21.880,00:04:55.800#embed" frameborder="0" allowfullscreen></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
|
|
|
|
|
|
|
|
window.addEventListener('message', listener, false);
|
|
|
|
|
|
|
|
|
|
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:49:13 +00:00
|
|
|
document.getElementById('setUrl').addEventListener('click', function(e) {
|
|
|
|
|
console.log('clicked button');
|
|
|
|
|
$iframe.contentWindow.postMessage(JSON.stringify({
|
|
|
|
|
data: {
|
|
|
|
|
url: '/AGR/editor/00:05:55.800#embed'
|
|
|
|
|
},
|
|
|
|
|
event: 'seturl'
|
|
|
|
|
}), '*');
|
|
|
|
|
});
|
|
|
|
|
|
2018-03-05 10:34:55 +00:00
|
|
|
$iframe.addEventListener('load', () => {
|
|
|
|
|
let timeout;
|
|
|
|
|
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>
|
