view iframe-resizer/example/index.html @ 9:7300ed4c1481 draft default tip

Uploaded
author saskia-hiltemann
date Mon, 04 Sep 2017 10:49:00 -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>
	</head> 
	<body> 
		<h2>Automagically resizing iFrame</h2>
		<p>Resize window or click one of the links in the iFrame to watch it resize.</p>
		<div style="margin:20px;">
			<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
		</div>
		<p id="callback">
		</p>
		<div style="margin: 8px 0;font-size:13px;">
			For details on how this works, see
			<a href="http://davidjbradshaw.github.io/iframe-resizer/">http://davidjbradshaw.github.io/iframe-resizer/</a>.
		</div>

		<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">

			iFrameResize({
				log                     : true,                  // Enable console logging
				enablePublicMethods     : true,                  // Enable methods within iframe hosted page
				resizedCallback         : function(messageData){ // Callback fn when resize 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>

	</body> 
</html>