精华内容
下载资源
问答
  • 下面小编就为大家带来一篇同步异步动态引入js文件的几种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js文件动态引入

    2018-05-30 09:59:11
    js文件动态引入O(∩_∩)O哈哈~,根据程序运行不同状态动态引入不同js
  • 这次给大家带来动态引入js四种方法总结,动态引入js四种方法的注意事项有哪些,下面就是实战案例,一起来看一下。index.html test.jsalert("hello! I am test.js");var str="1";dynamic.js//第一种方式:直接...

    5268f80b9b1e01f982625ef6fac83ca1.png

    这次给大家带来动态引入js四种方法总结,动态引入js四种方法的注意事项有哪些,下面就是实战案例,一起来看一下。

    index.html

    test.jsalert("hello! I am test.js");

    var str="1";

    dynamic.js//第一种方式:直接document.write 但这样会把当前的页面全覆写掉

    //document.write("

    //第二种方式:动态改变已有script的src属性

    //s1.src="test.js"

    //第三种方式:动态创建script元素

    /* var oHead = document.getElementsByTagName('HEAD').item(0);

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

    oScript.type = "text/javascript";

    oScript.src="test.js";

    oHead.appendChild(oScript);

    */

    //其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~

    //alert(str);

    /*以上三种方式都采用异步加载机制,也就是加载过程中,页面会往下走,

    如果这样的话会有问题的,如上面的str就访问不到,因为当程序执行alert(str)时,test.js还在加载Ing....

    那么第四种就是基于ajax请求的,且是推荐

    */

    function GetHttpRequest()

    {

    if ( window.XMLHttpRequest ) // Gecko

    return new XMLHttpRequest() ;

    else if ( window.ActiveXObject ) // IE

    return new ActiveXObject("MsXml2.XmlHttp") ;

    }

    function ajaxPage(sId, url){

    var oXmlHttp = GetHttpRequest() ;

    oXmlHttp.onreadystatechange = function()

    {

    if (oXmlHttp.readyState == 4)

    {

    includeJS( sId, url, oXmlHttp.responseText );

    }

    }

    oXmlHttp.open('GET', url, false);//同步操作

    oXmlHttp.send(null);

    }

    function includeJS(sId, fileUrl, source)

    {

    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){

    var oHead = document.getElementsByTagName('HEAD').item(0);

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

    oScript.type = "text/javascript";

    oScript.id = sId;

    oScript.text = source;

    oHead.appendChild( oScript );

    }

    }

    ajaxPage( "scrA", "test.js" );

    alert( "主页面动态加载JS脚本。");

    alert( "主页面动态加载a.js并取其中的变量:" + str );

    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    推荐阅读:

    Vue数据响应式原理分析

    React Form组件封装步骤详解

    以上就是动态引入js四种方法总结的详细内容,更多请关注Gxl网其它相关文章!

    link.jpg

    1040x100.jpg

    本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

    本文系统来源:php中文网

    展开全文
  • 下面小编就为大家带来一篇关于js动态引入四种方式的实例代码,具有很好的参考价值,分享给大家一起跟随小编过来看看吧
  • h5页面动态引入js/css文件

    千次阅读 2020-05-15 11:43:12
    h5页面动态引入js/css文件 /***引入 js / css 文件 @example: aui.import('js/aui.picker.js') @example: aui.import(['js/aui.picker.js', 'css/aui.picker.css']) */ function import(url){ switch (url....

    可一次引入多个js/css文件,引入后可在页面head中查看

    /***引入 js / css 文件
       @param {string}  url js/css文件路径
       @example: aui.import('js/aui.picker.js')
       @example: aui.import(['js/aui.picker.js', 'css/aui.picker.css'])
    */
    function import(url){	
    	switch (url.constructor){
    		case Array:
    			for(const [index, item] of url.entries()){
    				creat(item);
    			}
    			break;
    		case String:
    			creat(url);
    			break;
    		default:
    			break;
    	}
    	function creat(file){
    		if(/^.+?\.js$/.test(file))
    		{ //JS文件引入
    			var script = document.createElement("script");
    			script.setAttribute("type", "text/javascript");
    			script.setAttribute("src", file);
    			document.querySelector('head').appendChild(script);
    		}
    		if(/^.+?\.css$/.test(file))
    		{ //CSS文件引入
    			var css = document.createElement('link');
    			css.rel = 'stylesheet';
    			css.type = 'text/css';
    			css.href = file;		
    			document.querySelector('head').appendChild(css);	
    		}			
    	}
    }
    
    展开全文
  • // 创建script标签,引入外部文件 let script = document.createElement('script') script.type = 'text/javascript' script.src = 'http://xxx.xxx.js' document.getElementsByTagName('head')[0].appendChild...

    一、创建 script 标签,引入 js 文件

    	// 创建script标签,引入外部文件
    	let script = document.createElement('script')
    	
    	script.type = 'text/javascript'
    	script.src = 'https://unpkg.com/vue@next'
    	
    	document.getElementsByTagName('head')[0].appendChild(script)
    	
    	// 引入成功
    	script.onload = function () {
    		console.log('js资源已加载成功了')
    	}
    	// 引入失败
    	script.onerror = function () {
    		console.log('js资源加载失败了')
    	}
    

    二、创建 script 标签,执行 js 代码

    // 创建script标签,执行script内容
    let script = document.createElement('script')
    
    script.type = 'text/javascript'
    script.text = `
    	console.log(111)
    `
    document.getElementsByTagName('head')[0].appendChild(script)
    
    展开全文
  • 方式一:在某个标签或元素内引入js片段,如下:  必须是日期格式(如yyyy-MM-dd):     value="" />     方式二:向html页面中引入js代码块,如下;  function aaa(){

    方式一:在某个标签或元素内引入js片段,如下:

    <tr>
                <td class="td1">必须是日期格式(如yyyy-MM-dd):</td>
                <td>
                    <input class="mini-textbox" vtype="date:yyyy-MM-dd" required="true" 

    value="<%= (new java.text.SimpleDateFormat(" yyyy-MM-dd ")).format(new Date()) %>" />
                </td>            
     </tr>

    方式二:向html页面中引入js代码块,如下;

    <script type = text/javascript>

           function  aaa(){

               alert("学如逆水行舟,不进则退");

          }

    </script>

    方式三:向html页面中引入js文件,如下:

    <script type="text/javascript" src="../css/style1/nui_form_common.js"></script>

    注意:

    1.  type="text/javascript",不写也不会报错,不过还是建议写上,尤其是写在页面中间的脚本片段。如果不写,浏览器就按照自身(浏览网页的、你无法控制的电脑)的默认设置来处理,一般的ie浏览器默认是javascript,但是难免没人把默认脚本设置为vbscript或者其它。

    2.  src="../css/style1/nui_form_common.js"代表的是引入的 js 文件的路径



    动态引入js的方法:

        if(true){
            document.write('<script src="' + contextPath + '/common/nui/locale/en_US.js" type="text/javascript" ></sc' + 'ript>');
        }else {
            document.write('<script src="' + contextPath + '/common/nui/locale/zh_CN.js" type="text/javascript" ></sc' + 'ript>');
            document.write('<script src="' + contextPath + '/common/nui/Pager.js" type="text/javascript" ></sc' + 'ript>');
        }

    注意事项:

     1.注意引号的使用,

    2.scritpt结束标签的分离,这里只要把  script 这个单词分开即可,从哪两个字母分割都可以


    展开全文
  • vue动态加载js.zip

    2020-04-15 19:11:44
    vue动态加载JavaScript动态的创建Script元素,然后通过更改它的 src 属性来加载脚本,脚本文件加载完成后,在脚本加载完成生效后才能执行回调函数。
  • 主要介绍了使用jquery动态加载js文件的方法,需要的朋友可以参考下
  • 在做微信h5开发的时候,安卓端是没有办法清除缓存的,我们可以通过动态引入js/css文件来解决缓存问题。 <script type="text/javascript"> document.write('<script type="text/javascript" charset="UTF-8...
  • vue动态引入js,路径为变量

    千次阅读 2020-03-11 15:12:59
    import(`@/${path}`) // path为变量 import(`@/${path}`).then(item=>{}); // item为引入js的export
  • js动态引入外部js

    千次阅读 2019-01-28 11:27:04
    js方法中添加  new_element=document.createElement("script");  new_element.setAttribute("type","text/javascript"... new_element.... //此处为要引入js的地址  ...
  • script标签动态引入js,并且加载执行

    千次阅读 2019-01-10 10:33:30
    先创建一个common.js文件在html文件中引入,设置好要动态引用的js路径 var url1 = "test1.js"; var url2 = "test2.js"; test1.js的内容为: alert(1111111) test2.js的内容为: alert(2222222...
  • 原生js——动态引入外部js、css文件

    千次阅读 2019-04-27 15:55:35
    原生js——动态引入外部js、css文件 把其写成自定义函数(url为文件路径)供以后的元素调用: //加载外部css文件 function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; ...
  • 在Vue 项目中动态引入 .js 文件

    千次阅读 2020-08-28 11:18:25
    静态引入js文件: <template> <div> </div> </template> <script> import 'echarts/map/js/province/hainan'// 引入省份数据(ps:显示那个省份必须引入对应城市的js文件) export...
  • 在Angular项目动态引入JS模块

    万次阅读 2017-10-10 16:45:09
    背景由于Angular项目默认使用ts作为开发语言,但是Angular本身是一个新...下面以引入jquery为例,介绍两种方法:方法一直接在应用入口index.html使用script方式引入:<script src="path/jquery.js">这种方法的特点: 1
  • 大家好!我叫戴向天 QQ群:602504799 QQ:809002582 如若有不理解的,可加QQ群进行咨询了解 function introduceFile( param ){ ... if(param.type == "script" ||param.type === "js"){ let _script = doc...
  • // 创建script标签,引入外部文件 let script = document.createElement('script') script.type = 'text/javascript' script.src = 'http://xxx.xxx.js' document.getElementsByTagName('head')[0].appendChild...
  • * 动态引入JS文件 **/ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http:...
  • 本文档把js加载做成vue组件,便于在其他模块引用,符合vue整体思路,供大家参考借鉴
  • 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入。...
  • 动态引入/添加js脚本

    千次阅读 2019-08-01 19:39:22
    var script=document.createElement("script");...script.type="text/javascript"; script.src="http://xxx/jquery-3.4.0.min.js"; document.getElementsByTagName('head')[0].appendChild(script);
  • 最近项目中需要引入百度地图api的js文件,刚开始想这还不简单,直接通过script引入,结果发现不行vue不支持下面的引入方式exportdefault{....}vue中引入js需要通过import,因此考虑写一个动态加载js的功能,可以结合...
  • 动态引入js文件

    千次阅读 2014-11-17 14:44:06
    动态引入js文件 背景:  打开一个页面,需要引用js文件、css文件,以及编写一些基本的html代码。  某个页面的功能比较丰富,需要引用大量的js文件。如果一开始就全部引进来,可能这个加载过程比较耗时。如果...
  • 先来说一下背景:由于公司产品需要给多个国家和地区的用户使用,...由于现在需要根据语言环境确定是否需要引入中文包,因此必须动态引入外部的js和css文件。我在这里做了一个demo,login.html可以让用户选择语言环...
  • ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function loadjscssfile(filename, filetype) { if ...
  • 引入jQuery,具体如下: $.getScript('new.js', function() { alert(poiObj); }); poiObj为new.js文件里的变量
  • 想在数据库引入文件动态判断文件是否包含Head标签,如果有的话在Head里面添加引入js信息?求助大佬如何实现?或者指明方向!感激不尽!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 648,974
精华内容 259,589
关键字:

动态引入js

友情链接: OpenMAX.zip