@ekolabs/iframily - npm Package Compare versions

Comparing version 1.0.0-temp.1 to 1.0.0-temp.2

package.json

		{
		"name": "@ekolabs/iframily",
		"version": "1.0.0-temp.1",
		"version": "1.0.0-temp.2",
		"description": "postMessage made simple & safe",
		@@ -5,0 +5,0 @@ "main": "dist/iframily.min.js",

README.md

		// MY TODO: check readme renders nicely in npm and github (initParent/Child api is longer line...)
		"version": "1.0.0-temp.1",
		npm publish --tag temp

		// MY TODO: targetOrigin regex not allowed both because it also controls the postMessage() and to avoid "dot" unescaping mistakes
		@@ -21,68 +24,15 @@

		// TODO: decide
		postMessage VS Iframily example:
		// TODO: replace images source?

		```html
		<!-- PARENT -->
		<iframe src="./child.html" name="myFrame" onload="onIframeLoaded(this)"></iframe>
		<script>
		window.onIframeLoaded = (iframeEl) => {
		window.addEventListener('message', (event) => {
		if (event.origin !== 'https://child.domain.com') {
		return;
		}
		With vanilla postMessage:

		if (event.data.callerId === 'someId') {
		alert(event.data.msg);
		}
		});
		![postMessage](https://s3.amazonaws.com/storage2.interlude.fm/dev_temp/asaf/iframily/images/new/postmessage.png)

		let iframeName = iframeEl.getAttribute('name');
		let iframeWindow = window.frames[iframeName];
		iframeWindow.postMessage({ msg: 'Who ya gonna call?', callerId: 'someId' }, 'https://child.domain.com');
		}
		</script>
		With Iframily:

		<!-- CHILD -->
		<script>
		window.addEventListener('message', (event) => {
		if (event.origin !== 'https://parent.domain.com') {
		return;
		}
		![Iframily](https://s3.amazonaws.com/storage2.interlude.fm/dev_temp/asaf/iframily/images/new/iframily.png)

		if (event.data.callerId === 'someId' && event.data.msg === 'hi') {
		event.source.postMessage({ msg: 'Ghostbusters! 👻', callerId: 'someId' });
		}
		});
		</script>
		```

		```html
		<!-- PARENT -->
		<iframe src="./child.html"></iframe>
		<script>
		let parentIframily = Iframily.initParent('someId', 'https://child.domain.com');

		parentIframily.sendMessage('Who ya gonna call?').then((response) => {
		alert(response);
		});
		</script>

		<!-- CHILD -->
		<script>
		Iframily.initChild('someId', 'https://parent.domain.com', (msg) => {
		if (msg === 'Who ya gonna call?') {
		return 'Ghostbusters! 👻';
		}
		});
		</script>
		```

		![postMessage vs Iframily example](https://s3.amazonaws.com/storage2.interlude.fm/dev_temp/asaf/iframily/images/post-new.png)

		![postMessage vs Iframily example](https://s3.amazonaws.com/storage2.interlude.fm/dev_temp/asaf/iframily/images/iframily-new.png)

		## Table of Contents

		* [Features]($features)
		* [Features](#features)
		* [Examples](#examples)
		@@ -89,0 +39,0 @@ * [Installation](#installation)

@ekolabs/iframily - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics