需求是在一个页面同时显示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"
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>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.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>