有关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会失效，又在什么情况下能正确执行呢？又或者不是这个问题，而是其它的问题呢？帮忙，快疯掉了。。。
...全文
312 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
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文件的字符集一致。
jsp页面中的代码执行加载顺序介绍
了解JSP页面中的代码执行加载顺序对于Web开发人员来说至关重要，因为它影响页面的表现和功能的实现。 JSP页面中的代码主要分为三部分：Java代码、JSP标签和脚本以及客户端的JavaScript和HTML代码。这些部分的执行...
关于JS和html代码的执行先后问题
为了确保这些代码能够正确执行，我们需要考虑脚本是否正确地插入到HTML中，以及是否使用了`async`或`defer`属性。 另一方面，`temp.jsp`是一个Java服务器页面（JSP）文件，它在服务器端被处理为HTML发送到客户端。...
JS中如何引用EL表达式
在 JavaScript 中引用 EL 表达式需要注意服务端和客户端的执行顺序，charset 编码问题，以及 JavaScript 文件和 JSP 文件的相互引用问题。通过遵循正确的方法和注意事项，我们可以成功地在 JavaScript 中引用 EL ...
仿百度搜索功能附带数据库 java+jsp
例如，你可以创建一个Java类，该类包含一个方法用于接收来自JSP页面的搜索关键词，执行SQL查询，并返回匹配的搜索结果。 **JSP**: JSP是Java的一种动态网页技术，它允许在服务器端生成HTML响应。在这个项目中，JSP...
在js文件中写el表达式取不到值的原因及解决方法
EL表达式的主要用途是在JSP页面中表达式语言的脚本表达式中动态获取值，其解析过程在服务器端执行。而JavaScript是一种在客户端执行的脚本语言。如果在js文件中直接使用EL表达式，往往会导致取不到值的问题。下面...
Web 开发

81,122

社区成员

341,744

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章