动态添加script

export function asyncLoadJs (url) {

return new Promise((resolve, reject) => {

// let hasLoaded = document.getElementsByTagName('script[src="' + url + '"]').length > 0

let item = document.getElementsByTagName('script')

for (let i = 0; i < item.length; i++) {

let srcItem = item[i].src

if (srcItem.includes(url)) {

resolve()

return

}

}

let script = document.createElement('script')

script.type = 'text/javascript'

script.src = url

document.body.appendChild(script)

script.onload = () => {

resolve()

}

})

}

export function loadAMapJS () {

return new Promise((resolve, reject) => {

asyncLoadJs('//webapi.amap.com/maps?v=1.4.12&key=密钥&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder')

.then((result) => {

return asyncLoadJs('http://webapi.amap.com/loca?v=1.2.0&key=61aeb5b4d175861fa1faeec9ec444afb')

})

.then(() => {

resolve()

})

})

}

### 使用 jQuery 动态创建并添加 script 标签或外部脚本 在现代 Web 开发中,动态加载 JavaScript 文件是一种常见的优化手段。通过这种方式可以按需加载资源,从而提升页面性能。以下是使用 jQuery 实现动态创建并添加 `script` 标签的具体方法。 #### 方法概述 可以通过 jQuery 的 `$()` 函数来操作 DOM 元素,并利用 `.appendTo()` 或其他类似的方法将新创建的 `<script>` 标签附加到文档中。这种方法不仅简单易懂,而且兼容性强[^1]。 #### 示例代码 以下是一个完整的例子,展示如何使用 jQuery 来动态加载外部 JS 脚本: ```javascript function loadScriptWithJquery(url, callback) { // 创建一个新的 <script> 标签 $("<script>") .attr({ type: "text/javascript", // 设置类型属性 src: url // 设置目标脚本 URL }) .on("load readystatechange", function () { // 处理加载完成事件 if (this.readyState === undefined || this.readyState === "loaded" || this.readyState === "complete") { $(this).off("load readystatechange"); // 移除监听器以防重复触发 if (typeof callback === "function") { callback(); // 如果存在回调,则调用它 } } }) .appendTo("head"); // 将新的 <script> 插入到 head 中 } ``` 此函数接受两个参数:一个是待加载的脚本地址 (`url`);另一个是当脚本成功加载后的回调函数 (`callback`)。该实现考虑到了跨浏览器的支持情况,特别是针对 Internet Explorer 的特殊处理方式[^2]。 #### 关键点解释 1. **动态创建 Script 标签** 利用了 jQuery 提供的强大选择器机制以及链式语法特性简化了 HTML 元素的操作过程。 2. **绑定 Load 和 ReadyStateChange 事件** 这是为了确保即使是在某些旧版 IE 浏览器下也能正常工作。因为不同版本对于何时通知脚本已完全加载有不同的行为模式[^3]。 3. **支持 Callback 执行流管理** 当指定的目标文件被成功引入之后,允许开发者定义额外的动作序列以便继续后续业务逻辑开发。 #### 注意事项 - 应始终验证传入链接的安全性和合法性以防止潜在攻击风险如 XSS 注射等问题发生。 - 对于大型项目建议采用模块化工具(例如 RequireJS)来进行依赖管理和异步加载更复杂场景下的需求满足[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值