下载鸥 > 网站下载 > 开发教程 > JS/JQuery

jquery不刷新页面重载js脚本

198 2022-08-18 03:37:15

收藏
在一些业务中,我们需要不刷新页面重载或加载js脚本,此时可以怎样实现呢?

如果你喜欢用jQuery库,那么实现轻而易举,记住这个函数
$.getScript
 

$.getScript用法

$.getScript('script1.js', function(data, textStatus) {
    //do something after script has loaded
});

但上方demo只能加载单个脚本,如果要加载多个呢?
 

$.getScript加载多个脚本用法

/* 自定义回调函数 */
var getScript = jQuery.getScript;
jQuery.getScript = function( resources, callback ) {
 
    var // reference declaration & localization
    length = resources.length,
    handler = function() { counter++; },
    deferreds = [],
    counter = 0,
    idx = 0;
 
    for ( ; idx < length; idx++ ) {
        deferreds.push(
            getScript( resources[ idx ], handler )
        );
    }
 
    jQuery.when.apply( null, deferreds ).then(function() {
        callback && callback();
    });
};
 
$.getScript(['script1.js','script2.js','script3.js'], function() {
    //do something after all scripts have loaded
});
 
//or seperate into an array to include
 
var scripts = ['script1.js','script2.js','script3.js'];
$.getScript(scripts, function(data, textStatus) {
    //do something after all scripts have loaded
});

$.get("js/ext/flowplayer-3.2.8.min.js")
.pipe($.get("js/eviflowplayer.js"))
.pipe($.get("js/evi.flowplayer.js", {}, function()
{
    W.EVI.FLOWPLAYER.init(elem.attr('id'));
});

这样,我们就实现了通过jQuery函数$.getScript重载/载入单个与多个脚本的需求。

本文地址:https://xzo.com.cn/develop/js/1107.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 340
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 267
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 308
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 349
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 275
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 288
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 363
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 531
随机JS/JQuery开发教程
轮播图插件swiper.js怎样实现显示3.5个(半个)轮播图的效果?
轮播图插件swiper.js怎样实现显示3.5个(半个)轮播图的效果?

swiper是一款非常常用且好用的轮播插件,但默认是没有显示3.5个(半个)轮播图的...

0 316
移动端加载序列化图片实现伪视频播放
移动端加载序列化图片实现伪视频播放

客户对于视频是有执念的,很多客户喜欢将banner图用视频做背景。pc端自然没有...

0 187
css实现图片从左到右滑入并淡入的特效
css实现图片从左到右滑入并淡入的特效

如果直接通过css3的left属性,实现的滑动效果并不丝滑。此时,如果给图片加入父...

0 201
swiper.js轮播时自动切换对应信息模块
swiper.js轮播时自动切换对应信息模块

swiper是一款非常好用的兼容pc+手机端轮播插件。大多数时候,如果要做视觉切...

0 168
CSS3怎样简单实现循环旋转效果?
CSS3怎样简单实现循环旋转效果?

css3动画已经走进了大大小小的网站,曾经只能用js实现的动画,也可以通过css3实...

0 179
键盘左右键进行上一页下一页翻页
键盘左右键进行上一页下一页翻页

上一页下一页按钮如果用鼠标点击,由于位置一直变化,体验不是很好。今天鸥哥就...

0 240
animate.css在线调试,支持直接复制样式名
animate.css在线调试,支持直接复制样式名

animate.css在线调试,支持直接复制样式名...

0 346
怎样用css3让多行文字垂直居中于父元素?
怎样用css3让多行文字垂直居中于父元素?

我们都知道,css属性vertical-align:middle的作用是垂直居中。但前提是单行文...

0 190
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入