js动态引入的四种方式

index.html

[html] view plaincopy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta content="text/html;charset=utf-8" http-equiv="content-type">
  5. <title> </title>
  6. <script src=‘‘ id="s1"></script>
  7. <script src="dynamic.js"></script>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

test.js

[html] view plaincopy

  1. alert("hello! I am test.js");
  2. var str="1";

dynamic.js

[javascript] view plaincopy

  1. //第一种方式：直接document.write 但这样会把当前的页面全覆写掉
  2. //document.write("<script src=‘test.js‘><\/script>");
  3. //第二种方式:动态改变已有script的src属性
  4. //s1.src="test.js"
  5. //第三种方式：动态创建script元素
  6. /*    var oHead = document.getElementsByTagName(‘HEAD‘).item(0);
  7. var oScript= document.createElement("script");
  8. oScript.type = "text/javascript";
  9. oScript.src="test.js";
  10. oHead.appendChild(oScript);
  11. */
  12. //其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~
  13. //alert(str);
  14. /*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走，
  15. 如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing....
  16. <strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong>
  17. */
  18. function GetHttpRequest()
  19. {
  20. if ( window.XMLHttpRequest ) // Gecko
  21. return new XMLHttpRequest() ;
  22. else if ( window.ActiveXObject ) // IE
  23. return new ActiveXObject("MsXml2.XmlHttp") ;
  24. }
  25. function ajaxPage(sId, url){
  26. var oXmlHttp = GetHttpRequest() ;
  27. oXmlHttp.onreadystatechange = function()
  28. {
  29. if (oXmlHttp.readyState == 4)
  30. {
  31. includeJS( sId, url, oXmlHttp.responseText );
  32. }
  33. }
  34. oXmlHttp.open(‘GET‘, url, false);//同步操作
  35. oXmlHttp.send(null);
  36. }
  37. function includeJS(sId, fileUrl, source)
  38. {
  39. if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
  40. var oHead = document.getElementsByTagName(‘HEAD‘).item(0);
  41. var oScript = document.createElement( "script" );
  42. oScript.type = "text/javascript";
  43. oScript.id = sId;
  44. oScript.text = source;
  45. oHead.appendChild( oScript );
  46. }
  47. }
  48. ajaxPage( "scrA", "test.js" );
  49. alert( "主页面动态加载JS脚本。");
  50. alert( "主页面动态加载a.js并取其中的变量：" + str );
时间： 2024-12-29 23:51:49

js动态引入的四种方式的相关文章

js创建对象的四种方式以及消耗时间比较

// Property-less object console.time('zoop1'); var zoop = (function (numObjects) { var pooz = Object.create(null); for(var i = 0; i< numObjects; i++) { pooz[i] = Object.create(null); } return pooz; })(1000000); console.timeEnd('zoop1'); // Using Obje

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

ASP.NET MVC之下拉框绑定四种方式（十）

前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC中下拉框中绑定枚举的几种方式. 话题引入 一般在下拉框中绑定数据的话,分为几种情况. (1)下拉框中的数据是写死的,我们直接给出死代码即可. (2)下拉框中的数据从数据库中读取出来,从而进行显示. (3)下拉框中直接用枚举显示. (4)下拉框中一个选择的值改变另外一个下拉框中的值. 关于下拉框中绑定

jQuery绑定事件的四种方式：bind、live、delegate、on

1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off. 2.必备的基础知识: DOM树 示例,这是在browser环境下的一棵模拟DOM树: 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们没有人为的设置stopPropagation(Moder Browser), cancel

jQuery绑定事件的四种方式

jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject

div与css结合的四种方式

第一种方式:               <div style=" background-color:#00ff00;font-size: 20px"> 第一种方式</div >               缺点:这种方式暴露的缺点是 代码严重重复. 第二种方式: 格式:标签名{                     属性一:属性值:                     属性二:属性值:                     ...           

【Java EE 学习第80天】【调用WebService服务的四种方式】

不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jdk命令wsimport生成调用源代码 package com.kdyzm.ws; import javax.jws.WebService; import javax.xml.ws.Endpoint; @WebService public class MyWsServer { public Strin

js如何实现继承（js实现继承的五种方式）

js继承有5种实现方式: 1.继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.username); } } function Child(username,password){ //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承 //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对

通过四种方式让PHP编码变得更轻松

通过四种方式让PHP编码变得更轻松 尽管已经目前PHP语言已经建立起属于自己的软件文化,但要找到它令人抓狂的弊端也绝对不是难事.我们曾经在之前的文章中列出过该语言最让开发人员难以接受的十二大糟糕特性. 不过在过去几年当中,PHP已经发生了一系列变动——从语言本身到相关生态系统再到对开发者社区的支持——这些确实值得我们加以关注.尽管已经抛弃了PHP并投身于Python或者Ruby的用户们不太可能在短时间内被吸引回来,但已经有迹象表明确实有人在不遗余力地对PHP加以完善.下面我们就一同来了解PHP语