需求是在一个页面同时显示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>
分享到：
相关推荐
在创建六宫格界面时，我们可以用QML创建六个Rectangle（矩形）组件，分别代表每个宫格。每个Rectangle可以设置不同的颜色、大小、边框等样式属性，并添加点击事件处理器，以便当用户点击时触发相应的功能。 例如，...
在Android开发中，GridView是一个非常重要的视图组件，它用于以网格形式展示数据，通常用于创建类似相册、应用列表等界面。在这个“7-1-GridView-9宫格.rar”压缩包中，包含了关于如何实现一个9宫格布局的知识点，...
在iOS开发中，创建一个9宫格界面是常见的任务，特别是在设计用户交互界面时，用于展示功能模块或者图片。这个场景通常涉及到自定义UICollectionView或UItableView的实现，因为这两种组件都可以方便地创建网格布局。...
1. 设计与制作：在Flash环境中创建一个新的文档，设置合适的舞台尺寸，然后设计9宫格的各个元素，包括按钮、图标和动画。 2. 编程：使用ActionScript编写交互逻辑，如鼠标悬停效果、点击事件处理等。 3. 导航链接：...
在本项目中，"jQuery实现win8风格文字宫格切换效果.zip" 提供了一个使用jQuery创建的Windows 8风格的文字网格切换效果。这种效果模仿了Windows 8操作系统中动态磁贴的视觉和交互体验，为网页增加了一种现代且吸引...
1. **HTML结构**：游戏的基础是用HTML元素搭建的，可能使用`<div>`创建16个宫格，每个宫格内部包含图片元素`<img>`，并利用属性如`id`、`class`进行区分和操作。 2. **CSS3**：通过CSS3可以实现宫格的布局（如使用...
在本案例中，我们关注的是“qt六宫格界面”，这通常指的是使用Qt库来设计的一种布局，其中包含六个独立的、网格状排列的区域，每个区域可以作为功能模块或展示不同内容。 Qt UI（用户界面）的设计允许开发者通过...
例如，使用$(document).ready()方法可以在页面加载完成后执行某些代码，确保DOM已经完全构建好。在这个幻灯片插件中，很可能就是在这个事件中初始化幻灯片的设置。 接着，我们关注这个6宫格设计。"6宫格"意味着幻灯...
游戏的核心是通过翻转16个不同图案的牌面，让玩家在有限的尝试次数内找到所有成对匹配的图片，从而完成游戏。这个过程不仅考验玩家的记忆力，还锻炼了他们的策略思考能力。 首先，我们要理解HTML5在游戏开发中的...
3. **创建9宫格对象**：然后，创建一个自定义的9宫格类，该类继承自Starling的`DisplayObject`或`Quad`类，并包含对9个子区域的引用。每个子区域都是一个独立的`Quad`对象，它们可以在需要时单独进行渲染和缩放。 4...
六宫格数独是一种经典的逻辑填数游戏，它在日本广受欢迎，并迅速风靡全球。数独游戏的目标是在9x9的网格内填入数字，使得每一行、每一列以及每一个由粗线划分的3x3的小九宫格内数字1到9各出现一次，且不重复。 数独...
本文将深入探讨“horwheel组件”，这是一个利用jQuery实现的功能，它允许用户通过鼠标滚轮来控制9宫格页面进行左右滑动，为用户提供了一种新颖且直观的浏览体验。 首先，我们要理解9宫格布局。9宫格是一种常见的...
在iOS开发中，"ios-仿探探六宫格相册.zip"的项目是一个典型的图片展示应用的实现，尤其在社交应用中非常常见，如探探等。这种六宫格相册的设计通常用于用户个人资料页，展示用户的多张照片。下面我们将详细探讨这个...
切换背景的64宫格作为js学习的经典案例，可以帮助我们快速练习for循环语法，js修改类目，事件绑定等综合知识
2. 六宫格数独的特点：六宫格数独是数独游戏的一种变化，特点是将9x9的宫格分成六个小宫格，每个小宫格中的数字也不能重复出现。 3. 数独游戏的解决策略：解决数独游戏的策略有很多，常见的有： Naked Pairs、...
javascript H5 APP网页游戏_九宫格,16宫格抽奖大转盘(源代码)
"图片9宫格拼接.zip" 是一个包含资源的压缩包，旨在帮助用户将9张图片拼接成一个九宫格布局的单一图像。这个过程涉及到图像处理的基础知识，包括图像缩放、数组操作以及图像组合。下面，我们将深入探讨这些知识点。 ...
标题中的“九宫格十二宫格自定义宫格小程序拼图游戏”表明这是一个基于微信小程序开发的拼图游戏，它可以适应不同的宫格模式，包括常见的九宫格和十二宫格，同时支持用户自定义宫格数量，提高了游戏的可玩性和趣味性...
在Android开发中，9宫格显示通常指的是使用GridView控件来展示一组小图标或图片，形成类似九宫格的布局效果。GridView是Android提供的一种基于网格的布局管理器，它可以将视图按照行列的方式进行排列，常用于创建...
最近有个大屏需要用到自定义大屏，还是拖动替换内容的，使用12宫格的形式 于是使用jquery写了个拖动各种宽高替换宫格位置的demo 比较简单，有数据提交和回显替换的表格功能 支持自定义6宫格9宫格12宫格等