From c6024ffabb8187f5d165f8ca8ae2b43046f3142e Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjaybhangar@gmail.com>
Date: Mon, 5 Mar 2018 16:19:13 +0530
Subject: [PATCH] log incoming messages to div + add button with example for
 seturl

---
 index.html | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 116dabc..603c424 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,19 @@
 <!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>
-		<script>
-console.log('hello');
-const $iframe = document.getElementById('padembed');
+		<button id="setUrl">
+			Set Iframe URL
+		</button>
+		<div id="messages">
 
+		</div>
+		<script>
+
+const $iframe = document.getElementById('padembed');
 
 window.addEventListener('message', listener, false);
 
@@ -16,11 +21,22 @@ function listener(event) {
 	const data = JSON.parse(event.data);
 	if (data.event === 'init') document.getElementById(data.target).isInit = true;
  	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', () => {
-	console.log('iframe loaded');
 	let timeout;
 	function init() {
 		console.log('init called');
