padmaEmbeds/index.html

60 lines
1.4 KiB
HTML
Raw Normal View History

<!doctype html>
<html>
<head>
<title>Subscribe to events from pad.ma iframe embed</title>
</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>
<button id="setUrl">
Set Iframe URL
</button>
<div id="messages">
</div>
<script>
const $iframe = document.getElementById('padembed');
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);
const $message = document.createElement('div');
$message.innerHTML = event.data;
document.getElementById('messages').appendChild($message);
}
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'
}), '*');
});
$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>