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

add some comments to the code

Browse Source
This commit is contained in:
Sanjay Bhangar 2018-03-05 16:28:33 +05:30
parent c6024ffabb
commit 132511b3a2
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -15,8 +15,15 @@
const $iframe = document.getElementById('padembed'); const $iframe = document.getElementById('padembed');
/*
Listen to all messages received by iframes on the page.
*/
window.addEventListener('message', listener, false); window.addEventListener('message', listener, false);
/*
Log all messages received from the iframe.
*/
function listener(event) { 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;
@ -26,6 +33,10 @@ function listener(event) {
document.getElementById('messages').appendChild($message); document.getElementById('messages').appendChild($message);
} }
/*
Event handler for clicking on button to set the URL of the iframe.
*/
document.getElementById('setUrl').addEventListener('click', function(e) { document.getElementById('setUrl').addEventListener('click', function(e) {
console.log('clicked button'); console.log('clicked button');
$iframe.contentWindow.postMessage(JSON.stringify({ $iframe.contentWindow.postMessage(JSON.stringify({
@ -38,6 +49,10 @@ document.getElementById('setUrl').addEventListener('click', function(e) {
$iframe.addEventListener('load', () => { $iframe.addEventListener('load', () => {
let timeout; let timeout;
/*
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.
*/
function init() { function init() {
console.log('init called'); console.log('init called');
if ($iframe.isInit) { if ($iframe.isInit) {