在一个页面上用iframe创建16个宫格.-优快云博客

本文介绍了一个页面同时显示16个网页，并实现缩放功能的技术，包括使用HTML、JavaScript和jQuery来创建输入表单，以及通过AJAX获取用户输入的网址并展示在页面上。此外，文章还介绍了如何在不同浏览器环境下实现缩放效果，特别强调了IE浏览器下利用`style`属性`zoom`的功能。同时，文章提供了代码示例，演示如何在页面加载时保存和加载用户的缩放偏好，以及实现页面定时刷新的功能。

需求是在一个页面同时显示16个网页,并且能进行缩放!!!看似很简单,实际上很复杂.最主要的难点就在于缩放这个功能只有ie才有 style属性是zoom.但又有个问题是跨域的问题.后来弄了n久,网上也找了很多资料才勉强的搞定.两个jsp;

[size=x-large][b]input.jsp[/b][/size]

<%@ page language="java" contenttype="text/html; charset=utf-8"	pageencoding="utf-8"%><!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"><script type="text/javascript"	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head><body>	<!-- 表单 -->	<p align="center">请在下面输入您需要查看的网址,默认前缀"http://"已加入</p>	<hr>	<form id="myform" action="input.jsp" method="post">		查看页面包括： <input type="text" name="website" id="website1"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website2" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website3"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website4" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website5"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website6" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website7"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website8" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website9"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website10" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website11"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website12" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website13"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website14" class="website"></input><br>		查看页面包括： <input type="text" name="website" id="website15"			class="website"></input><br> 查看页面包括： <input type="text"			name="website" id="website16" class="website"></input><br>	</form>	<input type="button" onclick="add()" value="提交" /></body><script type="text/javascript">	function add() {		var str;		$("input").each(function() {			if ($(this).attr("name") == "website") {				if (str != '' || str != 'undefined') {					str += $(this).val() + ',';				}			}			if (str != '') {				location.href = "show.jsp?url=" + str.slice(9);//去除字符串中开头的'undefined'.			}		});	}</script></html>

[size=x-large][b]show.jsp[/b][/size]

<%@ page language="java" contenttype="text/html; charset=utf-8"	pageencoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%	//获得url传递的参数并根据","进行分割装入一个数组中.	string str = request.getparameter("url");	string[] s = str.split(",");	pagecontext.setattribute("urlarray", str);%><!-- 页面定时刷新 每隔60s <meta http-equiv="refresh" content="60"> --><html><head><script type="text/javascript"	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><style type="text/css">iframe {	height: 22.5%;	width: 22.5%;	border: 1px solid black;	overflow: auto;	zoom: 1;	-moz-transform: scale(1.00);	-moz-transform-origin: 0 0;	-o-transform: scale(1.00);	-o-transform-origin: 0 0;	-webkit-transform: scale(1.00);	-webkit-transform-origin: 0 0;}</style></head><script type="text/javascript">	/* iframe变焦函数. 只能在ie浏览器下使用!!! */	var is_ie = navigator.useragent.tolowercase().indexof('msie') > -1;	if (is_ie) {		$("iframe").css("z-index", "-1 !important");	}	var zoom = 1;	//保存至cookie的字段名.	var cookiename = "cookiename";	/*放大*/	function zoomin() {		zoom = number(zoom) + 0.1;//强制转换数字类型,否则会进行字符串操作		delcookie(cookiename);		setcookie(cookiename, zoom);		dozoom();	}	/*缩小*/	function zoomout() {		zoom -= 0.1;		delcookie(cookiename);		setcookie(cookiename, zoom);		dozoom();	}	// 页面载入后,如果cookie中有变焦倍率值,则根据cookie中的值进行变焦.	//否则变焦到默认的倍率值:0.4	function loadzoom() {		// 初始页面默认值		var defaultzoom = 0.4;		if (getcookie(cookiename) == null) {			alert(kshfkshdf);			changezoom(defaultzoom);		} else {			changezoom(getcookie(cookiename));		}	}	function changezoom(zoomnum) {		// 变焦到指定的倍率		zoom = zoomnum;		delcookie(cookiename);		setcookie(cookiename, zoom);		dozoom();	}	//将变焦倍率保存进cookie	function setcookie(name, value)//两个参数，一个是cookie的名子，一个是值	{		var days = 30; //此 cookie 将被保存 30 天		var exp = new date(); //new date("december 31, 9998");		exp.settime(exp.gettime() + days * 24 * 60 * 60 * 1000);		document.cookie = name + "=" + escape(value) + ";expires="				+ exp.togmtstring();	}	//获得cookie	function getcookie(name) {		var arr = document.cookie.match(new regexp("(^| )" + name				+ "=([^;]*)(;|$)"));		if (arr != null)			return unescape(arr[2]);		return null;	}	//删除cookie	function delcookie(name) {		var exp = new date();		exp.settime(exp.gettime() - 1);		var cval = getcookie(name);		if (cval != null)			document.cookie = name + "=" + cval + ";expires="					+ exp.togmtstring();	}	function dozoom() {		var zoomspan = $("#zoom");		var iframe = $("iframe");		iframe.css("-moz-transform", "scale(" + zoom + ")");		iframe.css("-webkit-transform", "scale(" + zoom + ")");		iframe.css("-o-transform", "scale(" + zoom + ")");		iframe.css("zoom", zoom);		var w = "";		var h = "";		if (is_ie) {			w = "none";			h = "none";		}		iframe.css("width", w);		iframe.css("height", h);		zoomspan.html(zoom);	}	//定时刷新	settimeout("selfreload()", 30000);	function selfreload() {		self.location.reload();	}</script><body onload="loadzoom()" style="background-color: #e3e4fa">	<h3 align="center">vip客户内容监控</h3>	<div align="center" width="99%">		<a href="javascript:zoomin()">放大</a> <a href="javascript:zoomout()">缩小</a>		<a href="javascript:changezoom(0.4)">0.4</a> <a			href="javascript:changezoom(0.6)">0.6</a> <span>缩放比列: <span			id="zoom">1.0</span> </span>	</div>	<br />	<div id="content" width="99%" align="center">		<c:foreach items="${urlarray}" var="url" varstatus="idx">			<iframe id="iframe${idx.index }" name="iframe${idx.index }"				class="iframe" src="http://${url }"></iframe>		</c:foreach>	</div></body></html>