针对前端tab切换页面动态引入js(不重复引用)

约定不等于承诺〃 2022-11-17 05:07 90阅读 0赞

在我们做项目的时候，肯定会遇到页面加载的性能优化，来是页面迅速渲染，不影响用户的体验，一下是我曾经针对tab页面引入的不同的js文件

需求：点击tab切换动态引入对应的js文件，重复点击的时候，则会判断是否有了该js文件，如果存在则不加载，如果没有则加载，废话不多说，上代码：

/\*

\*   tab切换动态加载js

\*   传递参数url即可，就是js的绝对路径，列如/home\_www/ackhome\_resources/js/groupManagement/userGroup.js

\*   commonSetting .loadScript("/home\_www/ackhome\_resources/js/groupManagement/userGroup.js", function() \{

\*       userGroup.js文件中的函数功能

\*   \})

\*/

var commonSetting = function()\{

return \{

init:function()\{

loadScript(url, callback) \{

var script = document.createElement("script");

script.type = "text/javascript";

if (typeof(callback) != "undefined") \{

if (script.readyState) \{

script.onreadystatechange = function() \{

if (script.readyState == "loaded" || script.readyState == "complete") \{

script.onreadystatechange = null;

callback();

\}

\};

\} else \{

script.onload = function() \{

callback();

\};

\}

\};

script.src = url;

if($("script\[src='"+url+"'\]").length <= 0)\{//未引用则引用

document.body.appendChild(script);

\}else\{

callback();

\}

\}

\}

\}

\}()

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js实现tab切换效果

ab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="app"> <ul class="tab-tilt...

古城微笑少年丶/ 2024年04月17日 13:51/ 0 赞/ 110 阅读

相关若依进行tab页面切换时要求不刷新页面 vue3

若依进行tab页面切换时要求不刷新页面 vue3 看看个人中心怎么实现的 ![在这里插入图片描述][57346f0fb5e84c76a19bbba56ab04ee0.

川长思鸟来/ 2024年02月20日 08:52/ 0 赞/ 56 阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 64 阅读

相关针对前端tab切换页面动态引入js(不重复引用)

在我们做项目的时候，肯定会遇到页面加载的性能优化，来是页面迅速渲染，不影响用户的体验，一下是我曾经针对tab页面引入的不同的js文件需求：点击tab切换动态引入对应的js文

约定不等于承诺〃/ 2022年11月17日 05:07/ 0 赞/ 91 阅读

相关 Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后，开始要写出一

骑猪看日落/ 2022年10月02日 10:51/ 0 赞/ 308 阅读

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

纯CSS实现Tab切换效果图思路代码 CSSJS实现Tab切换效果图

怼烎@/ 2022年09月24日 11:20/ 0 赞/ 337 阅读

相关页面单个TAB切换

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/e1f138ce3146437

忘是亡心i/ 2022年08月28日 09:53/ 0 赞/ 219 阅读

相关控制tab页面的切换

<div id="menubox"> <ul id="leftMenu">

叁歲伎倆/ 2022年05月29日 10:26/ 0 赞/ 243 阅读

相关用js写tab页面

原理：依据bootStrap框架的tab页样式：原生态的是这样： <!DOCTYPE html> <html> <head> <meta charset="UTF-

落日映苍穹つ/ 2022年05月14日 06:42/ 0 赞/ 160 阅读

相关 Tab选项页面的切换

开发工具与关键技术：Visual Studio 作者：肖广斌撰写时间：2019年6月16日你们的项目中是否有一个页面里面需要放多个不同页面，不同

今天药忘吃喽~/ 2022年01月13日 12:17/ 0 赞/ 352 阅读