Robin Dobby89

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

	/*
	* Generate a SVG-sprite mixin for Sass
	* ====================================
	*
	* Gaya Kessler - http://gaya.ninja - http://twitter.com/GayaNinja
	*
	* SVGSprite is a wonderful package, but doesn't enable responsive sprites out of the box.
	* This moustache template generates a sass file with a mixin for the generated SVG-sprite.
	* Calculates the position and size of the background by filename.
	* Included SVG image scales to width and height.

	<span class="logo" data-logo="examplelogo"></span>

	<!-- By default the .logo element should span 100% width.
	If you need it to be constrained in size use a container element with a width % value on it -->
	<style>
	.logo--header {
	width: 25%;
	}
	</style>
	<div class="logo--header">

	(function (window) {
	var transitions = {
	'transition': 'transitionend',
	'WebkitTransition': 'webkitTransitionEnd',
	'MozTransition': 'transitionend',
	'OTransition': 'otransitionend'
	},
	elem = document.createElement('div');

	for(var t in transitions){

	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">

	<script src="./parse_url.js"></script>

	<script type="text/javascript">

	var url1 = "http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content";

	var myConfObj = {
	iframeMouseOver : false
	}
	window.addEventListener('blur',function(){
	if(myConfObj.iframeMouseOver){
	console.log('Wow! Iframe Click!');
	}
	});

	document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){

	function slugify(text)
	{
	return text.toString().toLowerCase()
	.replace(/\s+/g, '-') // Replace spaces with -
	.replace(/[^\w\-]+/g, '') // Remove all non-word chars
	.replace(/\-\-+/g, '-') // Replace multiple - with single -
	.replace(/^-+/, '') // Trim - from start of text
	.replace(/-+$/, ''); // Trim - from end of text
	}