iframe并不是很常用的,在标准的网页中非常少用。通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,在最近的项目开发中,需要涉及到iframe的知识,现整理如下,以供日后参考:
<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>
<%
@ 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