view iframe-resizer/example/frame.nested.html @ 7:0f2b740536fb draft

Uploaded
author saskia-hiltemann
date Mon, 21 Aug 2017 09:16:07 -0400
parents ac5f9272033b
children
line wrap: on
line source

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="utf-8"> 
		<title>iFrame message passing test</title> 
		<meta name="description" content="iFrame message passing test"> 
		<meta name="viewport" content="width=device-width">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<script type="text/javascript">
			//MDN PolyFil for IE8 (This is not needed if you use the jQuery version)
			if (!Array.prototype.forEach){
				Array.prototype.forEach = function(fun /*, thisArg */){
				"use strict";
				if (this === void 0 || this === null || typeof fun !== "function") throw new TypeError();
				
				var
				t = Object(this),
				len = t.length >>> 0,
				thisArg = arguments.length >= 2 ? arguments[1] : void 0;

				for (var i = 0; i < len; i++)
				if (i in t)
					fun.call(thisArg, t[i], i, t);
				};
			}
		</script>
		<style>
			*, *:before, *:after {box-model: border-box;}
			a { float:right; margin-left:10px;}
			
			h2 {margin-top: 0;}
		</style>
	</head> 
	<body>
		<a href="frame.content.html">Back to page 1</a>
		<h2>Nested iFrame</h2>
		<p>Resize window or click one of the links in the nested iFrame to watch it resize.</p>
		<div style="margin:20px;">
			<iframe id="nestedIFrame" src="frame.content.html" width="100%" scrolling="no"></iframe>
		</div>
		<p id="callback">
		</p>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script type="text/javascript" src="../js/iframeResizer.min.js"></script> 
		<script type="text/javascript">


			var level = document.location.search.replace(/\?/,'') || 0;

			$('iframe').attr('id','nestedIFrame'+level).attr('src','frame.content.html?'+level);

			iFrameResize({
				log                     : true,                  // Enable console logging
				enablePublicMethods     : true,                  // Enable methods within iFrame hosted page
				resizedCallback         : function(messageData){ // Callback fn when message is received
					$('p#callback').html(
						'<b>Frame ID:</b> '    + messageData.iframe.id +
						' <b>Height:</b> '     + messageData.height +
						' <b>Width:</b> '      + messageData.width + 
						' <b>Event type:</b> ' + messageData.type
					);
				},
				messageCallback         : function(messageData){ // Callback fn when message is received
					$('p#callback').html(
						'<b>Frame ID:</b> '    + messageData.iframe.id +
						' <b>Message:</b> '    + messageData.message
					);
					alert(messageData.message);
				},
				closedCallback         : function(id){ /// Callback fn when iFrame is closed
					$('p#callback').html(
						'<b>IFrame (</b>'    + id +
						'<b>) removed from page.</b>'
					);
				}
			});


		</script>
		<script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script> 

	</body> 
</html>