sanj/padmaEmbeds
1
0
Fork 0
Code Issues 4 Pull Requests 1 Releases Wiki Activity

log incoming messages to div + add button with example for seturl

Browse Source
This commit is contained in:
Sanjay Bhangar 2018-03-05 16:19:13 +05:30
parent 1fa71c7474
commit c6024ffabb
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -1,14 +1,19 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Subscribe to events from pad.ma iframe embed</title>
</head> </head>
<body> <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> <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>
<script> <button id="setUrl">
console.log('hello'); Set Iframe URL
const $iframe = document.getElementById('padembed'); </button>
<div id="messages">
</div>
<script>
const $iframe = document.getElementById('padembed');
window.addEventListener('message', listener, false); window.addEventListener('message', listener, false);
@ -16,11 +21,22 @@ function listener(event) {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.event === 'init') document.getElementById(data.target).isInit = true; if (data.event === 'init') document.getElementById(data.target).isInit = true;
console.log('received event', event); console.log('received event', event);
console.log('name', event.data.name); 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', () => { $iframe.addEventListener('load', () => {
console.log('iframe loaded');
let timeout; let timeout;
function init() { function init() {
console.log('init called'); console.log('init called');