8.0w+
社区成员
有关JSP页面中的javascript无法正确执行的问题
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会失效，又在什么情况下能正确执行呢？又或者不是这个问题，而是其它的问题呢？帮忙，快疯掉了。。。
<%--
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会失效，又在什么情况下能正确执行呢？又或者不是这个问题，而是其它的问题呢？帮忙，快疯掉了。。。
...全文
当前发帖距今超过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中的字符编码三者保持一致。
<%@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上看错误很明显。
另外，你的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的距左位置居中算法）
没有执行，太奇怪了。。。
我运行时，通过浏览器的查看源代码发现以下问题：
当以.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文件的字符集一致。
JAVA上百实例源码以及开源项目源代码 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码，一个很...
JSP页面中引入JS文件没反应 小伙伴们在做网页开发的时候经常用到这种问题，有些是因为js文件的路径错误，如果按住ctrl能点进去文件说明路径正确，废话少说，直接上栗子。 以我的代码为例 <%--引入js文件--%> <script type="text/...
JSP中按钮点击事件不能调用JS方法 问题描述：显示方法未定义，调用方法失败 定义的方法： <head> <title>SpringMVC HelloWorld</title> <script type="text/javascript" src="./app/javascript/lib/jquery-3.4.1.js"/> &...
关于JSP页面点击按钮没反应，方法没有执行的检查 本人前端知识属于菜鸟级的，不喜勿喷。...经过一番摸索，原来是方法名用到了JSP里面的保留字。。还有这个限制，真实醉了。在此，本人总结一下出现诸如此类方法的检查手段： （1）id元素是否有重复 （2）
java、javascript、js、jsp的区别 javascript==jsjs是一种脚本语言，在html中，css管理位置，html主管内容，而js主管动作，减轻后台的操作，可以很简单的就实现对输入的数据的验证。比如说注册的时候，用js中的ajax到后台实时验证本用户名是否已经被...
JSP的执行过程及生命周期 从决定开始走JavaWeb方向,就先去重温了Html CSS JavaScript,然后学习Servlet编程,昨天进入了JSP的学习.接近两天的JSP学习,灌输了很多技术点,难免有点消化不良.所以还是决定慢下来一点,整理整理一些常用的知识点,消化...
JAVASCRIPT、JSP、JS有什么区别和联系 js是javascript的缩写。以下是JSP与JS的区别和联系： 名字：JS：JavaScriptJSP：Java Server Pages 执行过程：JSP先翻译，翻译成Servlet执行如： test.jsp 要变成 test_jsp.java 然后编译成 ...
JavaScript脚本语言简介及如何嵌入html/jsp页面 一、JavaScript简介 JavaScript是一种通用的、跨平台的、基于原型...它的作用在于控制网页中的对象元素，实现网页浏览者与网页内容之间的动态交互。用JavaScript脚本实现网页动态效果，实质上是应用JavaScript自身内建
JavaEE学习之jsp编写登陆注册页面 JavaEE学习之jsp编写登陆注册页面 刚开始学习javaee，好多东西需要一点点积累。最近用jsp和简单的JavaScript写的登录注册界面，简单做一下记录。 准备–页面布局 ...在Dreamweaver中大概是如下效果 HTML–&g...
javascript中new Date()的浏览器兼容性问题 引言： 同一种语言javascript，在不同的浏览器中，存在语言兼容性问题，本质上是由于不同的浏览器是支持的语言标准和实现上各有差异。本文将基于new Date来创建Date对象来分析这个问题。
HTML/JSP引入JS文件路径问题解析 可以看到我的测试test6.html页面与我的js文件所在的myUtils文件夹在同一个目录。 代码清单1-1 arraysUtils.js var arrays={};//定义数组对象 //复制数组方法,将a复制给b arrays.copyArrays=function(a,b){ ...
JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面) JSP中如何利用JS实现登录页面的跳转(JSP中如何利用JS实现跳转页面)注:只是用到js中的setTimeout();具体使用方法:setTimeout(函数名, 时间(毫秒)); setTimeout( )是属于 window 的 method, 但我们都是略去 window 这...
JavaScript 继承父类方法的正确姿势 JavaScript 继承父类方法的正确姿势 不想看前期的介绍可以直接划到最下面看总结和正确姿势，跳过原因的讲解。 初学 js ，总是喜欢把方法直接定义在对象内部，类似于 Java 那样。 下面定义一个简单 js 对象。 ...
java中图片上传并在jsp页面显示 本文将阐述怎么使用commons-fileupload将图片上传至mysql数据库，并利用java servlet将其在浏览器中显示 出来。 前提条件： 正确安装了mysql,tomcat,并下载了commons-fileupload-1.0.jar。 1，前台页面 ...
解决js location.href路径正确但请求失败、无反应、不执行的问题 解决js location href路径正确但不跳转、无反应、不执行的问题 先说明导致请求失败原因：url传值有长度限制，超出限制是不是无法传后面的值 修改前代码： location.href="${pageContext.request.contextPath}/...
