有关JSP页面中的javascript无法正确执行的问题

yuyaangel 2010-10-06 10:03:44
1.index.jsp
<%--
Document : index
Created on : 2010-10-6, 9:07:20
Author : Administrator
--%>

<%@page contentType="text/html" 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=gb2312" />
<title>
弹出式登陆窗口测试
</title>
<link type="text/css" rel="stylesheet" href="css.css" />
<script type="text/javascript" src="js.js"></script>
</head>
<body id="body">
<!--测试按钮点击触发show()方法-->
<a href=# onClick="show()">登录</a>
<div id="div1" class="div1"></div><!--这是要覆盖网页的层,不必写任何东西-->
<div id="div2" class="div2"><!--这是弹出的模式窗口层-->
<!--嵌套在层中的层,用来做标题栏,按个人需求定义-->
<div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
<label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
关闭 <!--用来关闭显示,在label中加了onclick事件,与鼠标悬停手的样式-->
</label>
</div>
<div>
<iframe src="login.jsp" width="400" height="280"/>
</div>
</div>
</body>
</html>


2.login.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
用户登录
</title>
</head>
<body>
<form action="login.jsp" method="post">
<label>用户名</label><input type="text" name="username"/><br>
<label>密码:</label><input type="password" name="pswd"/><br>
<input type="submit" name="Submit" value="登录"/>
<input type="reset" name="Reset" value="重置"/>
</form>
</body>
</html>


3.js.js
function show()
{
div1.style.display="inline";//设置层1显示
div1.style.width=body.clientWidth;//设置层1宽度等于body宽度
div1.style.height=body.clientHeight;//设置层1高度满屏
div2.style.display="inline";//设置层2的显示
div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
}

//关闭显示
function closeShow()
{
div1.style.display="none";
div2.style.display="none";
}


4.css.css

/*
Document : css
Created on : 2010-10-6, 9:10:12
Author : Administrator
Description:
Purpose of the stylesheet follows.
*/

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

.div1{
/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/
background-color:gray;/*背景色*/
position: absolute ;/*绝对定位,必选,使层绝对依照top,left的标准显示,否则将不能实现覆盖*/
top:0;/*层与页面顶部距离*/
left:0;/*层与左侧边距离*/
z-index:1;/*当发生重叠时的优先级,数大的会覆盖数较小的,没进行设置的均可视为小于0*/
display:none; /*层是否可见,初始化none不可见*/
filter:Alpha(opacity=30);/*过滤颜色,设置透明度(可见度)30,数越小越透明*/
}

/*层2的样式*/
.div2{
/*本层显示在最前端,其它控件均不可用*/
width:400px;/*显示宽度*/
height:300px;/*显示高度*/
position:absolute;/*绝对定位*/
z-index:2;/*优先级*/
display: none;/*是否显示*/
border:3px inset blue; /*边框:宽度,样式,颜色*/
background-color:white;/*背景色*/
}

网页的目的就是为了在jsp中用javascript实现弹出式登录窗口(借鉴的网上的代码),可是执行结果却是有弹出窗口,但是并无遮罩层(也挡不住窗口后面的东西),而且弹出窗口的位置并不是居中,而是随代码在页面中的位置的变化而变化。
我检查了很多次,代码应该没有问题,因为当我把主页的后缀改为.html(即将index.jsp改为index.html)时就能正确执行,经过几十次的失败,我怀疑是JSP与javascript之间的问题,我知道它们一个在服务器执行,一个在客户端执行,但是到底是一种什么关系呢?即在什么情况下JSP页面中的javascript会失效,又在什么情况下能正确执行呢?又或者不是这个问题,而是其它的问题呢?帮忙,快疯掉了。。。
...全文
227 点赞 收藏 7
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
yuyaangel 2010-10-07
恩,你说得对,其实是JS代码有问题,问题在于各种长度后面没有加单位"px"!加上单位就对了,呵呵
回复
magong 2010-10-06
[Quote=引用楼主 yuyaangel 的回复:]
<%@page contentType="text/html" 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=gb2312" />

[/Quote]
可能是字符集问题,注意pageEncoding/charset及文件property中的字符编码三者保持一致。
回复
yuyaangel 2010-10-06
我给出的主页只是一个测试,其实真正的主页是一个论坛,上面因为要从数据库中读取相应信息,才用的JSP
回复
magong 2010-10-06
如果页面中没有动态内容,就用.html好了,不妨碍使用,且效率应该还要好一些。
回复
magong 2010-10-06
.jsp和.html的表现差异,应该是字符集问题造成的,因为你在引入JS文件的时候没有指定字符集,CSS文件中也没有指定自己的字符集。
另外,你的JS代码是有问题的。在FireFox上看错误很明显。
回复
yuyaangel 2010-10-06
。。。貌似不是字符编码的问题。。。
我运行时,通过浏览器的查看源代码发现以下问题:
当以.html结尾时(页面正确显示时),遮罩层与弹出窗口的代码为
<div id="div1" class="div1" style="display: inline; width: 1366px; height: 667px; "></div><!--遮罩层-->
<div id="div2" class="div2" style="display: inline; top: 183.5px; left: 483px; ">...</div><!--这是弹出的模式窗口层-->
而以.jsp结尾时(页面不正确显示时),相应代码为
<div id="div1" class="div1" style="display: inline; "></div><!--遮罩层-->
<div id="div2" class="div2" style="display: inline; ">...</div><!--这是弹出的模式窗口层-->
显然,javascript中的函数执行结果不同,这才导致了页面的显示导常,而且源代码给人的感觉好像是有几行javascript代码
(div1.style.width=body.clientWidth;//设置层1宽度等于body宽度
div1.style.height=body.clientHeight;//设置层1高度满屏
div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法)
没有执行,太奇怪了。。。
回复
magong 2010-10-06
还要注意jsp文件和js/css文件的字符集一致。
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2010-10-06 10:03
社区公告
暂无公告