微信扫一扫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文件的字符集一致。
- 打赏
- 举报
ssm，jsp中按钮点击后无法调用到js（javascript）中的方法，按钮点击无响应 ssm，jsp中按钮点击后无法调用到js（javascript）中的方法，按钮点击无响应 该js代码块实现的功能为：判断手机号格式（正则判断）是否正确，以及跳转到controller。 单纯看调用的话，可以直接看js代码块头两句即可。...
JSP中按钮点击事件不能调用JS方法 问题描述：显示方法未定义，调用方法失败 定义的方法： <head> <title>SpringMVC HelloWorld</title> <script type="text/javascript" src="./app/javascript/lib/jquery-3.4.1.js"/> &...
JSP页面中引入JS文件没反应 小伙伴们在做网页开发的时候经常用到这种问题，有些是因为js文件的路径错误，如果按住ctrl能点进去文件说明路径正确，废话少说，直接上栗子。 以我的代码为例 <%--引入js文件--%> <script type="text/...
java中定义全局变量字符_在JSP页面中定义一个String类型的Java全局变量str,正确代码是( )。 (5.0分)_学小易找答案... 【单选题】下列表单元素中,不是单一表单元素的是( )。 (5.0分)【填空题】表单提交请求,默认情况下是 方式,除此外,还有 方式。 (10.0分)【单选题】JSP程序段的用法是( )。 (5.0分)【填空题】page指令的 属性用来导入...
html打开页面自动调用函数,Html5 页面中 JavaScript 启动调用的三种方法比较 转载请保留此句：太阳火神的美丽人生 - 本博客专注...首先，来看一下 Html5 页面引用 JavaScript 代码的几种方式：1、Html5 页面中使用 标签容纳 JavaScript 代码；init();这里不仅可以调用任意位置的函数，而且可...
java、javascript、js、jsp的区别 javascript==jsjs是一种脚本语言，在html中，css管理位置，html主管内容，而js主管动作，减轻后台的操作，可以很简单的就实现对输入的数据的验证。比如说注册的时候，用js中的ajax到后台实时验证本用户名是否已经被...
javascript与java jsp_JavaScript和JSP的区别？ 名字：JS：JavaScriptJSP：Java Server Pages执行过程：JSP先翻译，翻译成Servlet执行如： test.jsp 要变成 test_jsp.java 然后编译成 test_jsp.class而 test_jsp.java 本身就是一个servlet.所以 jsp只是servlet的一...
JAVASCRIPT、JSP、JS有什么区别和联系 js是javascript的缩写。以下是JSP与JS的区别和联系： 名字：JS：JavaScriptJSP：Java Server Pages 执行过程：JSP先翻译，翻译成Servlet执行如： test.jsp 要变成 test_jsp.java 然后编译成 ...
java web 和js区别_jsp和javascript之间有什么区别？ 很多人都把jsp和javascript混为一谈，都以为jsp和javascript是一个东西，其实jsp和javascript是有很大的区别的。下面本篇文章就来给大家介绍一下jsp和javascript的区别，希望对大家有所帮助。jsp和javascript之间的...
JSP的执行过程及生命周期 从决定开始走JavaWeb方向,就先去重温了Html CSS JavaScript,然后学习Servlet编程,昨天进入了JSP的学习.接近两天的JSP学习,灌输了很多技术点,难免有点消化不良.所以还是决定慢下来一点,整理整理一些常用的知识点,消化...
JavaScript脚本语言简介及如何嵌入html/jsp页面 一、JavaScript简介 JavaScript是一种通用的、跨平台的、基于原型...它的作用在于控制网页中的对象元素，实现网页浏览者与网页内容之间的动态交互。用JavaScript脚本实现网页动态效果，实质上是应用JavaScript自身内建
jsp页面安全问题 在做SSI架构的项目，其中有大量的jsp页面，关于jsp的安全性问题，主要体现在web工作目录的WEB-INF文件夹下，可以将页面保存在WEB-INF文件下，这样用户就不能访问该页面了。它为什么能体现安全性能，就好比小偷要偷...
jsp中java实现弹窗_jsp用java弹窗 web应用中经常需要判断用户是否已经登录，如果没有登录，那么跳转到登录页面。一般我们在后台页面中都会使用frame来划分功能区。这种方法比较实用，但是随之而来就有一个小问题，就是当用户session超时之后，当用户...
JavaEE学习之jsp编写登陆注册页面 JavaEE学习之jsp编写登陆注册页面 刚开始学习javaee，好多东西需要一点点积累。最近用jsp和简单的JavaScript写的登录注册界面，简单做一下记录。 准备–页面布局 ...在Dreamweaver中大概是如下效果 HTML–&g...
在JSP中，点击网页某个按钮或者超链接执行某些需要确认的命令时，弹出确认框如下效果： 如果点击确定，则执行要操作的命令。如果点击取消则不执行。 实现步骤： 1：在jsp，或者html 实现步骤：第1步在jsp，或者html页面的的<head></head>标签之间添加如下js代码：<SCRIPT type="text/javascript">function del(){if(confirm("真的要删除...
