如何在JSP页面正确加载远程JavaScript?服务器执行异常解决
解决服务器无法加载远程jQuery/jQueryUI脚本的问题
首先,你的核心问题是服务器无法访问外部CDN资源,导致jQuery和jQueryUI加载失败——而你的script.js大概率依赖这两个库,所以才会出现脚本无法执行的情况。下面给你两种可行的解决方案:
方案一:本地托管静态资源(最推荐,稳定性最高)
既然服务器无法访问外部CDN,最稳妥的方式是把这两个库的文件下载到本地,和你的项目静态资源放在一起:
- 下载jQuery 2.1.3的压缩版文件(
jquery.min.js) - 下载jQueryUI 1.11.2的压缩版文件(
jquery-ui.min.js,如果需要UI样式,还要同步下载对应的CSS文件) - 把这两个文件放到你项目中
style.css、script.js所在的目录 - 修改页面中的脚本引用,替换成本地路径:
<!-- 替换原来的远程CDN引用 --> <script src="./jquery.min.js"></script> <script src="./jquery-ui.min.js"></script> <script src="./script.js"></script>
这样就能确保服务器可以直接加载本地的脚本文件,完全不受外部网络限制影响。
方案二:修复动态加载脚本的代码
你之前尝试的动态加载代码有两个关键问题:
- 两个脚本用了同一个
id="first",导致第二个脚本(jQueryUI)会因为检测到id已存在而被跳过加载 - 没有保证加载顺序:jQueryUI依赖jQuery,必须等jQuery加载完成后再加载jQueryUI
修正后的动态加载代码如下:
<script> // 先加载jQuery,加载完成后再加载jQueryUI (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.onload = function () { // jQuery加载完成后,初始化jQueryUI的加载 (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.onload = function () { // 这里可以添加依赖jQueryUI的初始化逻辑,或者动态加载你的script.js var customScript = d.createElement(s); customScript.src = "./script.js"; fjs.parentNode.insertBefore(customScript, fjs); }; js.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"; fjs.parentNode.insertBefore(js, fjs); })(document, 'script', 'jquery-ui-script'); }; js.src = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"; fjs.parentNode.insertBefore(js, fjs); })(document, 'script', 'jquery-script'); </script>
注意:如果服务器完全无法访问外部网络,这个方案还是会失效,所以优先推荐方案一。
额外小提示
我注意到你代码里的隐藏输入框有语法错误:
<input type="hidden" name="request_id" value="=reqId%>"/>
应该修正为:
<input type="hidden" name="request_id" value="<%=reqId%>"/>
这个错误可能会导致request_id参数无法正确传递,建议一并修复。
内容的提问来源于stack exchange,提问作者Phill Alexakis




