add some comments to the code

This commit is contained in:
Sanjay Bhangar 2018-03-05 16:28:33 +05:30
parent c6024ffabb
commit 132511b3a2

View File

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