diff iframe-resizer/example/index.html @ 0:ac5f9272033b draft

first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/iframe-resizer/example/index.html	Tue Jul 01 11:42:23 2014 -0400
@@ -0,0 +1,75 @@
+<!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>
\ No newline at end of file