zoukankan      html  css  js  c++  java
  • 动态加载JS的4种方法

    1、直接document.write

    <script language="javascript">
    document.write(
    "<script src='test.js'><\/script>");
    </script>

    2、动态改变已有script的src属性

    <script src='' id="s1"></script>
    <script language="javascript">
    s1.src
    ="test.js"
    </script>

    3、动态创建script元素

    代码
    <script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type
    = "text/javascript";
    oScript.src
    ="test.js";
    oHead.appendChild( oScript);
    </script>

    这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。

    要动态加载的JS脚本:a.js,以下是该文件的内容。
    上述代码执行后 a.js 的 alert 执行并弹出消息,

    但是 主页面产生了错误,没有弹出对话框。原因是 ’str’ 未定义,为什么呢?因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候,可以用下面的第四种方法。

    var str = "中国";
    alert(
    "这是a.js中的变量:" + str);


    主页面代码:

    代码
    function LoadJS(id, fileUrl) {
    var scriptTag = document.getElementById(id);
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    if (scriptTag) oHead.removeChild(scriptTag);
    oScript.id
    = id;
    oScript.type
    = "text/javascript";
    oScript.src
    = fileUrl;
    oHead.appendChild(oScript);
    }
    LoadJS(
    "a.js");
    alert(
    "主页面动态加载a.js并取其中的变量:" + str);

     

    4、原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象。

     

    注意:a.js必须用UTF8编码保存,要不会出错。因为服务器与XML使用UTF8编码传送数据。

    主页面代码:

    代码
    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) {
    if (oXmlHttp.status == 200 || oXmlHttp.status == 304)

    {
    IncludeJS(sId, url, oXmlHttp.responseText);
    }
    else {
    alert(
    'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')');
    }
    }
    }
    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.language
    = "javascript";
    oScript.type
    = "text/javascript";
    oScript.id
    = sId;
    oScript.defer
    = true;
    oScript.text
    = source;
    oHead.appendChild(oScript);
    }
    }
    AjaxPage(
    "scrA", "b.js");
    alert(
    "主页面动态加载JS脚本。");
    alert(
    "主页面动态加载a.js并取其中的变量:" + str);

    现在完成了一个JS脚本的动态加载。

    代码
    var Rash = true;
    var msg = "";
    function norash() {
    if (confirm("确定要取消吗")) Rash = false;
    }
    function rashit() {
    setInterval(
    'getrss()', Inttime);
    }
    function getrss() {
    if (Rash == true) {
    head
    = document.getElementsByTagName('head').item(0);
    script
    = document.createElement('script');
    script.src
    = 'INCLUDE/AutoUpdate.asp';
    script.type
    = 'text/javascript';
    script.defer
    = true;
    void(head.appendChild(script));
    window.status
    = msg;
    }
    }
    rashit();
  • 相关阅读:
    Springboot 之 自定义配置文件及读取配置文件
    SQLSERVER系统视图 sql server系统表详细说明
    MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义
    使用Ecplise git commit时出现"There are no stages files"
    maven添加sqlserver的jdbc驱动包
    java将XML文档转换成json格式数据
    java将XML文档转换成json格式数据
    cannot be resolved. It is indirectly referenced from required .class files
    org.codehaus.jackson.map.JsonMappingException: Can not construct instance of java.util.Date from String value '2012-12-12 12:01:01': not a valid representation (error: Can not parse date "2012-12-
    @Autowired注解和静态方法 NoClassDefFoundError could not initialize class 静态类
  • 原文地址:https://www.cnblogs.com/enone/p/1920465.html
Copyright © 2011-2022 走看看