 iframe并不是很常用的，在标准的网页中非常少用。 通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面,在最近的项目开发中,需要涉及到iframe的知识,现整理如下,以供日后参考:
 <%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="org.springframework.web.bind.ServletRequestUtils" %>
<%@ page import="com.ouou.album.service.beans.UserRole" %>
<%@ page import="java.util.List" %>
<%@ page import="com.ouou.album.model.Albums" %>
<%@ page import="com.ouou.album.model.*" %>
<%@ include file="/common/taglib.jsp" %>
<%@ include file="/common/global.jsp" %>
<%!
private final static int pageSize = 7;
%>
<%
int albumId=0;
int phId = ServletRequestUtils.getIntParameter(request, "id", 0);
Photos photos = photosManager.getPhoto(phId);
Albums albums = albumsManager.getAlbumsByPhotoId(phId);
List<Photos> photosList;
  if (null != photos) ...{ //当传递参数是id时,判断用户权限
  if (photos.getUserId() != user.getUid()) ...{
 out.println("<script>alert('您无权访问此相片！');history.back();</script>");
return;
 }
}else...{ //当相片和相册名称都不存在时
out.println("<script>alert('该相片已不存在或被删除！');history.back();</script>");
return;
 }
if(null!=albums)...{
albumId = albums.getAlbumId();
}
photosList = photosManager.getPhotos(albumId, UserRole.manager); //有相册id得到所有相片列表
int totolNum =photosList.size(); //相片的数目
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="zh-CN" http-equiv="Content-Language"/>
<meta name="robots" content="all"/>
<%@ include file="/common/style.jsp" %>
<%@ include file="/common/script.jsp" %>
</head>
<body id="zzxpgl">
<div id="main">
<%@ include file="/common/nav.jsp" %>
<hr>
<div id="content">
<%@ include file="/common/user_nav.jsp" %>
<hr/>
<div id="c_02">
<%@ include file="/common/menu.jsp" %>
<hr/>
<div id="mid">
<h3 id="m_01"></h3>
<div id="m_02">
<div id="m_2_1">
<a href="#" id="left" onclick="left_move();">
<img src="/img/8/shim.gif"/>
</a>
</div>
<div id="m_2_2">
<div id="m_2_2_1">
<%
for (int i = 0;i < photosList.size(); i++) ...{
Photos photo = photosList.get(i);
%>
<a id="photo_<%=i%>" href="javascript:void(Iframe.document.location
='/manage/picBig.do?id=<%=photo.getPhotoId()%>')"
<%if (i >= pageSize) out.println("style="display:none"");%> >
<img src="/photo?type=1&pid=<%=photo.getPhotoId()%>"/>
</a>
<%}%>
</div>
</div>
<div id="m_2_3">
<a href="#" id="right" onclick="right_move();">
<img onclick="" src="/img/8/shim.gif"/>
</a>
</div>
</div>
<iframe id="Iframe" name="Iframe" src="/manage/picBig.do?id=<%=phId%>" width="100%"
height="900" scrolling=no frameborder=0 marginheight=0 marginwidth=0></iframe>
</div>
</div>
</div>
<hr/>
<%@ include file="/common/foot.jsp" %>
</div>
<script type="text/javascript">
var curPosition = 0;
var total =<%=totolNum%>;
var size =<%=pageSize%>;
function left_move() ...{
if (curPosition == 0) return;
var left = curPosition - 1;
var right = curPosition + size - 1;
$("photo_" + right).style.display = "none";
$("photo_" + left).style.display = "block";
curPosition = left;
}
function right_move() ...{
if (total - (size + curPosition) <= 0) return;
var right = curPosition + size;
$("photo_" + curPosition).style.display = "none";
$("photo_" + right).style.display = "block";
curPosition ++;
}
</script>
</body>
</html>
以上实现了点击任一张照片,Iframe的内容发生相应改变, picBig是Iframe的内容,是 另外的html页面;并且图片可以在一定范围内左移或是右移,效果请看下面的图片: http://blog.csdn.net/houhy/gallery/image/159229.aspx 注:详细介绍iframe的网址: http://www.blabla.cn/html_examples/038_iframe.html  本文来源：http://blog.csdn.net/houhy/archive/2007/08/27/1760455.aspx
|
站内文章搜索
