在一个页面上用iframe创建16个宫格.
需求是在一个页面同时显示16个网页,并且能进行缩放!!!看似很简单,实际上很复杂.最主要的难点就在于缩放这个功能只有IE才有 style属性是zoom.但又有个问题是跨域的问题.后来弄了N久,网上也找了很多资料才勉强的搞定.两个JSP;
input.jsp
<%@ 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"id="website2" name="website" id="website3"id="website4" name="website" id="website5"id="website6" name="website" id="website7"id="website8" name="website" id="website9"id="website10" name="website" id="website11"id="website12" name="website" id="website13"id="website14" name="website" id="website15"id="website16" 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>show.jsp
<%@ 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.4function 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();}//将变焦倍率保存进cookiefunction 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();}//获得cookiefunction getCookie(name) {var arr = document.cookie.match(new RegExp("(^| )" + name+ "=([^;]*)(;|$)"));if (arr != null)return unescape(arr[2]);return null;}//删除cookiefunction 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> <ahref="javascript:changeZoom(0.6)">0.6</a> <span>缩放比列: <spanid="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 }"src="http://${url }"></iframe></c:forEach></div></body></html>