php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创

原理解析：第一步：使用dom创建

应用：1、提高代码的复用，减少代码量；2、添加一个javascript控制器和 session可以实现动态改变页面样式；3、由于是页面是从上到下依次加载文件的，并且边加载边解释，所以可以添加javascript控制器控制页面文件的加载顺序，如先加载css布局文件，再显示有图片的css美化文件,之后再加载大的falsh文件，或者安内容的重要性来加载。\r

阅读提示：e文不好的初学者可以直接看中文，然后拷贝代码试验下。\r

To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "script" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together:

以下为引用的内容：

function loadjscssfile(filename, filetype){

if (filetype=="js"){ //判断文件类型

var fileref=document.createElement('script')//创建标签

fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript

fileref.setAttribute("src", filename)//文件的地址

}

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)

}

loadjscssfile("myscript.js", "js") //打开页面时浏览器动态的加载文件

loadjscssfile("javascript.php", "js") // 打开页面时浏览器动态的加载"javascript.php" ，

loadjscssfile("mystyle.css", "css") //打开页面时浏览器动态的加载.css 文件

接下来的工作是绑定到

标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次，绑定两次浏览器也不会出现异常，但是效率就低了。为了避免\r

这种情况我们可以新增一个全局数组变量，把绑定的文件名字保存在里面，每次绑定前先检查一下是否已经存在，如果存在就提示已经存在，如果不存在就绑定。\r

document.getElementsByTagName("head")[0].appendChild(fileref)

By referencing the HEAD element of the page first and then calling appendChild(), this means the newly created element is added to the very end of the HEAD tag. Furthermore, you should be aware that no existing element is harmed in the adding of the new element- that is to say, if you call loadjscssfile("myscript.js", "js") twice, you now end up with two new "script" elements both pointing to the same Javascript file. This is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile(), and only load a file if it's new:

var filesadded="" //保存已经绑定文件名字的数组变量

function checkloadjscssfile(filename, filetype){

if (filesadded.indexOf("["+filename+"]")==-1){// indexOf判断数组里是否有某一项

loadjscssfile(filename, filetype)

filesadded+="["+filename+"]" //把文件名字添加到filesadded

}

else

alert("file already added!")//如果已经存在就提示

}

checkloadjscssfile("myscript.js", "js") //success

checkloadjscssfile("myscript.js", "js") //redundant file, so file not added

Here I'm just crudely detecting to see if a file that's set to be added already exists within a list of added files' names stored in variable filesadded before deciding whether to proceed or not.

Ok, moving on, sometimes the situation may require that you actually remove or replace an added .js or .css file. Lets see how that's done next.

php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...相关推荐

为什么css文件是.main,页面无法加载main.css
yii2 如何在页面底部加载css和js 作者:白狼出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留 ...
ajax如何请求json文件,简单的ajax请求加载外部json文件
我在学习ajax ....我试图从json文件发出一个基本请求,它与我的index.html位于同一个文件夹中,但由于某种原因它说未定义:(我可以看到错误是可变的人,但我不能赶上为什么它未定义.... ...
vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹正常情况下static文件夹是非常干净的如果你发现你的static文件夹出现了多余的img.fonts ...
wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
Android热修复技术初探（三）：动态加载外部资源
前面已经介绍了Android平台上的几种ClassLoader,这几种ClassLoader都有各自的使用场景,有了这些基础知识之后,才能更好地理解以及探究Android热修复技术.首先我们来探究怎么 ...
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )
文章目录 I . CMake 引入动态库与静态库区别 II . Android Studio 中 CMake 引入动态库流程 III . 指定动态库查找路径 IV . 链接函数库 V . 完整代码示例 ...
静态链接库（LIB）和动态链接库（DLL），DLL的静态加载和动态加载，两种LIB文件。
静态链接库(LIB)和动态链接库(DLL),DLL的静态加载和动态加载,两种LIB文件. 一. 静态链接库(LIB,也简称"静态库")与动态链接库(DLL,也简称"动态库 ...
php获取laydate,详解关于laydate.js加载laydate.css路径错误问题
laydate.js是属于Javascript系列的一款日期控件与时间插件,laydate.js支持兼容IE6在内的主流浏览器.laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵 ...
spark-submit --files 动态加载外部资源文件
在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...

php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...

php动态引入js文件路径问题,JavaScript_动态加载外部css或js文件，原理解析：第一步：使用dom创 - phpStudy...相关推荐

最新文章

热门文章