jsp页面使用include 标签后引入的外部js失效

最新推荐文章于 2022-01-04 21:15:33 发布

原创最新推荐文章于 2022-01-04 21:15:33 发布 · 6.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS异常 #解决方法

java 同时被 2 个专栏收录

14 篇文章

订阅专栏

jsp程序设计

7 篇文章

订阅专栏

本文分析了在header.jsp和index.jsp中重复引入jQuery导致的样式错乱问题，详细解释了引入外部JS文件时的冲突原因，并提供了有效的解决方案。

heder.jsp引入外部js代码代码如下

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/style/css/pcreset.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/style/css/pcless.css" />
<script src="${pageContext.request.contextPath }/style/jquery/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/style/jquery/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

index.jsp页面使用inclde标签引入header.jsp后导致样式错乱。引入之前样式是正常的

代码如下：

<title>首页</title>
<script src="${pageContext.request.contextPath }/style/jquery/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/style/jquery/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <!-- 引入首部 -->
	<jsp:include page="/jsp/header.jsp"/>
	<!--描述：轮播图-->
     .......
</body>

原因分析：

在header.jsp和index.jsp中同时都引入了jquery的js文件，此时，当index.jsp引入header.jsp时，就会导致外部引入的js文件冲突，就会导致js代码无效。因此动态效果错乱。

解决：删除一个文件中引入的重复js文件即可