动态载入/删除/更新外部 JavaScript/Css 文件的代码

最新推荐文章于 2024-04-17 10:04:35 发布
最新推荐文章于 2024-04-17 10:04:35 发布
阅读量162 收藏
点赞数

https://www.jb51.net/article/24104.htm

 

动态载入/删除/更新外部 JavaScript/Css 文件的代码

 更新时间：2010年07月03日 00:21:52   作者：    我要评论

 

动态载入/删除/更新外部 JavaScript/Css 文件的代码

动态载入 JavaScript/Csss 文件 
传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加: 

复制代码代码如下:


<head> 
<script type="text/javascript" src="myscript.js"></script> 
<link rel="stylesheet" type="text/css" href="main.css" /> 
</head> 



这些文件用这种方式会同步加载到当前这个页面。 

现在用动态的方式载入JavaScript/Css文件： 

用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素 
设置相应的属性 
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾 

复制代码代码如下:


function loadjscssfile(filename, filetype){ 
//如果文件类型为 .js ,则创建 script 标签，并设置相应属性 
if (filetype=="js"){ 
var fileref=document.createElement('script'); 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", filename); 
} 
//如果文件类型为 .css ,则创建 script 标签，并设置相应属性 
else if (filetype=="css"){ 
var fileref=document.createElement("link"); 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", filename); 
} 
if (typeof fileref!="undefined") 
document.getElementsByTagName("head")[0].appendChild(fileref); 
} 
//动态添加一个.js 文件 
loadjscssfile("myscript.js", "js"); 
//像添加.js文件一样，动态添加一个.php文件 
loadjscssfile("javascript.php", "js"); 
//动态一个.css文件 
loadjscssfile("mystyle.css", "css"); 
 


为了防止多次载入同一个js/css文件， 添加以下判断（这只是粗略检测） 

复制代码代码如下:


//临时载入的文件名 
var filesadded=""; 

function checkloadjscssfile(filename, filetype){ 
if (filesadded.indexOf("["+filename+"]")==-1){ 
loadjscssfile(filename, filetype); 
//把 [filename] 存入 filesadded 
filesadded+="["+filename+"]"; 
} 
else{ 
alert("file already added!"); 
} 

//第一次载入 
checkloadjscssfile("myscript.js", "js"); 
//重复载入同一个文件， 失败 
checkloadjscssfile("myscript.js", "js"); 



动态删除 JavaScript/Csss 文件 
注意：ie6/7 下动态删除样式时有bug. 2种解决方案：1.样式表里不要有import的样式表 2.把link的type属性设置为空值， 然后再修改 href 的地， 或者直接设置href为空， 最后再把type值设置成”text/css” 强制让ie解释新的样式表。 

取得相应的 DOM 元素 
根据 文件名&文件类型 定位元素 
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素 

复制代码代码如下:


function removejscssfile(filename, filetype){ 
//判断文件类型 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; 
//判断文件名 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; 
var allsuspects=document.getElementsByTagName(targetelement); 
//遍历元素， 并删除匹配的元素 
for (var i=allsuspects.length; i>=0; i--){ 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
allsuspects[i].parentNode.removeChild(allsuspects[i]); 
} 
} 

removejscssfile("somescript.js", "js"); 
removejscssfile("somestyle.css", "css"); 
 


动态更新 JavaScript/Csss 文件 
使用 createElement 创建 要更新的 JavaScript/Css 元素 
查找要被替换的元素 
用 replaceChild 替换元素 

复制代码代码如下:


function createjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
var fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/css") 
fileref.setAttribute("href", filename) 
} 
return fileref 
} 

function replacejscssfile(oldfilename, newfilename, filetype){ 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; 
var allsuspects=document.getElementsByTagName(targetelement); 
for (var i=allsuspects.length; i>=0; i--){ 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){ 
var newelement=createjscssfile(newfilename, filetype); 
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]); 
} 
} 
} 
//用 "newscript.js" 替换 "oldscript.js" 
replacejscssfile("oldscript.js", "newscript.js", "js")； 
//用 "newscript.css" 替换 "oldscript.css" 
replacejscssfile("oldstyle.css", "newscript.css","css"); 

laiyr2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何调用股票交易软件api接口？
1841085904的博客
12-05 2526
随着人们的生活水平越来越高，人们可以通过公司的股票交易软件api接口来查询股票，也可以用股票交易软件api接口来了解股市，采用正规的界面可以确保数据的准确性，及时的根据股价的涨跌幅度做出一些选择，所以公司所用的股票交易软件api接口非常重要，选择正确的平台可以获得良好的API接口。接下来就跟着小编一起看一看如何调用股票交易软件api接口？一般情况下，人们都会选择投资股票或者是投资基金来赚取利润，而想要查看股票的数据，就必须通过公司的API接口来查看，这个时候就需要购买API接口。股票交易软件api接口的调用
股票实时行情数据API接口分享
2301_78150700的博客
07-06 5015
【代码】股票实时行情数据API接口分享。
股票交易接口、a股交易接口、股票交易接口api
03-22
1、股票交易接口 2、a股交易接口 3、股票交易接口api
动态载入/删除/更新外部 JavaScript/Css 文件
weixin_33834628的博客
01-06 89
    传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在&lt;head&gt;标签里面进行添加:&lt;head&gt;            &lt;script type="text/javascript" src="myscript.js"&gt;&lt;/script&gt;            &lt;link rel="style
探索 DynCSS：动态 CSS 解决方案的革新
最新发布
gitblog_00072的博客
04-17 286
探索 DynCSS：动态 CSS 解决方案的革新 项目地址:https://gitcode.com/vzaccaria/DynCSS DynCSS 是一个创新的开源项目，源自 GitCode，它的目标是让 CSS 样式更具动态性和响应性。这个项目引入了一种新的方式来管理和应用 CSS 规则，使得开发者可以更灵活地控制网页的样式表现。 项目简介 DynCSS 提供了一个 JavaScript 库，它...
Vue 组件内动态控制 script标签的引入与删除
qq_42389674的博客
12-17 5595
动态引入的背景 在vue项目开发中只有一个index.html 这个时候，如果我们要做到只在指定路由组件加载的时候，才加载指定的外部js 并且在离开指定路由或者组件的时候，删除掉引入的js 动态引入 const scriptInfo = document.createElement("script") s.type = "text/javascript" scriptInfo.setAttribute("data-callType","callScript") ..
页面载入等待代码(用javascript技术实现)
12-10
这可以通过CSS和JavaScript组合实现，例如使用CSS3动画或JavaScript动态改变元素的样式。以下是一个简单的例子，创建一个旋转的加载图标： ```css .loading-spinner { width: 20px; height: 20px; border: 3px ...
CSS对Web页面载入效率的影响分析总结
10-30
1. 尽量减少CSS文件大小：通过压缩、去除空格和注释来减小文件体积，使用CSS预处理器（如Sass或Less）来组织代码，提高可读性和可维护性。 2. 优化选择器：使用更具体的选择器（如ID和类）来提升性能，避免使用...
Js载入文件并显示进度条JSLoader
02-20
JSLoader是一种利用JavaScript实现的文件加载工具，它主要用于动态地加载外部资源，如JavaScript文件、CSS样式表、图片等，并且在加载过程中提供进度反馈，以提升用户体验。在Web开发中，尤其在处理大量异步加载时，...
股票数据api接口收藏2024
u010614946的博客
02-06 902
股票实时、历史数据，技术指标，数据接口
股票数据接口API
04-16
NULL 博文链接：https://musicbox95351.iteye.com/blog/1810059
分享股票下单API接口的方式和API攻略
1841085904的博客
11-07 2042
1.通过券商交易接口API交易下单是最稳定最快速的！退而求其次，机构也可以选择文件扫单下单，效率也很高！python的easytrader包是目前散户量化时自动化交易最常用的，但缺点是不稳定，不能放在服务器运行。2.其实，个人可以合法合规的直接API极速交易的，不过对网络技术要求较高，也仅支持部分券商。但，很可惜，API下单和文件扫单这俩功能均不对散户开放哦！答：有的，合法合理，非破解无后门，使用安全，极速稳定，可放服务器运行。其实，从制度上是对散户量化不友好的，对吧？授权成功的交易账户数量。
最新最全的免费股票数据接口--沪深A股实时交易数据API接口（一）
u012940698的博客
09-09 2万+
最新最全的免费股票数据接口
实用的股票接口，股票api收藏（1）
ig507
04-24 2430
描述：根据《股票列表》得到的股票代码作为参数，得到近十年每天资金流入趋势，按时间倒序。描述：根据《股票列表》得到的股票代码作为参数，得到近十年每天阶段主力动向，按时间倒序。描述：获取指数、行业、概念（包括基金，债券，美股，外汇，期货，黄金等的代码），其中。描述：根据《股票列表》得到的股票代码作为参数，得到每分钟主力资金走势，按时间倒序。（代码）可以作为下方接口的参数传入，从而得到某个指数、行业、概念下的相关股票。描述：根据《股票列表》得到的股票代码作为参数，得到相关的指数、行业、概念。
最新实测可用的股票实时交易数据API接口
u012940698的博客
12-20 777
字段说明：t_交易时间;字段说明：t_更新时间;字段说明：d_交易时间;字段说明：t_交易时间;API接口：http://api.mairui.club/hszb/macd/000001/dn/b997d4403688d5e65a。API接口：http://api.mairui.club/hszb/macd/000001/dn/b997d4403688d5e65a。字段说明：d_数据归属日期;字段说明：d_数据归属日期;字段说明：d_数据归属日期;字段说明：t_交易时间;字段说明：t_交易时间;
Python结合钉钉实时自动监控股票行情，上班炒股再也不怕老板发现
WANGJUNAIJIAO的博客
12-19 1462
我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。这样我们就拿到了所需股票的实时信息。【保证100%免费】
对接新浪股票交易接口api需要注意哪些细节 ？
1841085904的博客
11-25 2120
最后，就是要建立一个高质量的股票交易接口API，在对接的过程中，除了要查看自己的信息之外，还需要对方提供的高质量的信息，这些信息都是经过精心挑选的，质量和稳定性都很好，特别是对于那些需要稳定，需要更多的人。首先是系统的联结，随着软件的不断发展，很多的软件都被分解成了不同的模块，但在具体的设计中，每个API接口的作用都很重要，因为在实际的设计中，软件都需要通过软件来完成，从而实现对软件的合理划分。在对接过程中，获得股票交易接口API的数据接口有什么经验？API还能作为一个开放的门户，用于对接。
2024年Python最新整理的免费股票数据API接口
热门推荐
u012940698的博客
03-04 19万+
4、下方所有API接口Url链接中的sh000001均为指数代码，可以更换，dn为分时级别，可以对照官方API文档更换。3、下方所有API接口Url链接结尾的b997d4403688d5e66a，均为请求证书秘钥，可以自行更换；3、下方所有API接口Url链接中的dn均代表日线，也就是分时级别，可以对照官方API文档自新更换分时级别；
不查看剪切板，在html文件地址+/latex代码实现载入latex到<div>
07-13
明白了你的需求，以下是根据你的要求进行修改的代码： ```html <!DOCTYPE html> <html> <head> <title>MathJax Example</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <style> .mathjax-formula { font-size: 2.8em; background-color: green; position: absolute; left: 0; top: 0; cursor: move; padding: 5px; border-radius: 5px; color: white; } </style> </head> <body> <div id="mathjax-formulas-container"></div> <script> var formulas = []; var selectedFormula = null; var offsetX = 0; var offsetY = 0; document.addEventListener("mousedown", function(event) { var target = event.target; if (target.classList.contains("mathjax-formula")) { selectedFormula = target; offsetX = event.clientX - selectedFormula.offsetLeft; offsetY = event.clientY - selectedFormula.offsetTop; } }); document.addEventListener("mousemove", function(event) { if (selectedFormula) { var xDiff = event.clientX - selectedFormula.offsetLeft - offsetX; var yDiff = event.clientY - selectedFormula.offsetTop - offsetY; if (xDiff >= 0 && xDiff <= selectedFormula.offsetWidth && yDiff >= 0 && yDiff <= selectedFormula.offsetHeight) { selectedFormula.style.left = event.clientX - offsetX + "px"; selectedFormula.style.top = event.clientY - offsetY + "px"; } } }); document.addEventListener("mouseup", function(event) { selectedFormula = null; }); document.addEventListener("keydown", function(event) { if (event.key === "Enter") { var input = document.getElementById("latex-input"); var latexCode = input.value.trim(); if (latexCode) { var newFormula = document.createElement("div"); newFormula.className = "mathjax-formula"; newFormula.style.left = event.clientX + "px"; newFormula.style.top = event.clientY + "px"; newFormula.innerText = latexCode; var mathjaxFormulasContainer = document.getElementById("mathjax-formulas-container"); mathjaxFormulasContainer.appendChild(newFormula); formulas.push({ latexCode: latexCode, position: { x: event.clientX, y: event.clientY } }); MathJax.Hub.Queue(["Typeset", MathJax.Hub, newFormula]); input.value = ""; } } }); </script> <div> <input type="text" id="latex-input" placeholder="输入 LaTeX 公式" /> </div> </body> </html> ``` 现在，你可以在页面上输入 LaTeX 公式，按下 Enter 键后会将公式加载到 `<div>` 中。你可以通过拖动已存在的 `<div>` 进行移动。感谢你的耐心和理解！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值