first commit, basic embed + message passing

6 years ago · 1fa71c7474
2 changed files with 45 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1 @@
+Experiments and examples using Pad.ma Embeds
--- a/index.html
+++ b/index.html
@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+	<head>
+
+	</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');
+
+
+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);
+	console.log('name', event.data.name);
+}
+
+$iframe.addEventListener('load', () => {
+	console.log('iframe loaded');
+	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>
			`@ -0,0 +1 @@`
			`Experiments and examples using Pad.ma Embeds`