AJAX返回HTML页面：跨域JS引用问题及动态加载解决方案

在处理使用Ajax技术从服务器获取HTML页面并将其动态插入到前端应用时，可能会遇到一个常见问题：由于返回的HTML页面中包含了指向外部JavaScript资源（如`<script src="//static.geetest.com/static/tools/gt.js"></script>`）的`src`引用，这些引用可能会指向不正确的域名，导致跨域访问错误或加载失败。这通常发生在使用HTTPS协议的服务器与非HTTPS的第三方资源交互时。 为了解决这个问题，有几种策略可以采取： 1. 删除Ajax返回页面中的静态JS引用：首先，检查从服务器返回的HTML页面，找出所有外部JavaScript资源的引用，并在前端代码中移除它们。例如，上面提到的Geetest验证脚本。这样做的原因是避免浏览器在尝试加载这些资源时遇到安全限制。 ```html <!-- 已删除 --> <!--<script src="//static.geetest.com/static/tools/gt.js"></script>--> ``` 2. 动态加载JS文件：为了确保安全并避免跨域问题，可以将这些外部脚本改为通过JavaScript动态加载。如示例代码所示，创建一个名为`loadScript`的函数，接受URL作为参数，然后动态创建一个新的`<script>`元素，设置其`src`属性为正确的URL，设置`async`属性为`true`，使其异步加载。这样可以在确保安全的前提下加载外部脚本。 ```javascript function loadScript(url) { var scr = document.createElement('script'); scr.src = url; scr.async = true; var lastScript = document.getElementsByTagName('script')[document.getElementsByTagName('script').length - 1]; lastScript.parentNode.insertBefore(scr, lastScript); } // 使用动态加载方法加载Geetest脚本 loadScript('//static.geetest.com/static/tools/gt.js'); ``` 通过这种方式，前端代码可以在服务器返回的HTML页面中，仅保留必要的部分，其余的外部资源通过动态方式加载，确保了安全性和跨域兼容性。同时，这种方法也有利于优化性能，减少不必要的HTTP请求。当需要更换或者更新这些外部资源时，只需修改前端代码中的URL即可，无需改动服务器端返回的HTML。