zoukankan      html  css  js  c++  java
  • 动态脚本

    前面的话

      动态脚本是指在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。和操作HTML元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入内部javascript代码。下面将详细介绍这两种情况

    外部脚本

    //script.js里面的内容
    box.style.color = "red";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "script.js";
    document.body.appendChild(script);

      使用函数封装如下:

    <div id="box">测试文字</div>
    <button id="btn">动态添加脚本</button>
    <script>
    function loadScript(url){
        loadScript.mark = 'load';
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    }
    btn.onclick = function(){
        if(loadScript.mark != 'load'){
            loadScript("js/script.js");        
        }
    }
    </script>

    内部脚本

      另一种插入动态脚本的方式是插入内部脚本,如下所示

    <script>
        box.style.color = "red";
    </script>
    var script = document.createElement("script");
    script.innerHTML = 'box.style.color = "red"';
    document.body.appendChild(script);

      使用函数封装如下:

    <div id="box">测试文字</div>
    <button id="btn">动态添加样式</button>
    <script>
    function loadScript(str){
        loadScript.mark = 'load';
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.innerHTML = str;
        document.body.appendChild(script);
    }
    btn.onclick = function(){
        if(loadScript.mark != 'load'){
            loadScript("box.style.color = 'red'");        
        }
    }
    </script>

      在标准浏览器下,上面代码可以正常运行。但是,在IE8-浏览器下却报错。这是因为IE8-浏览器将<script>元素视为一个特殊的元素,不允许DOM访问其子节点,使用appendChild()方法或innerHTML属性都会报错

    兼容写法

      动态插入内部脚本存在兼容问题,可使用<script>元素的text属性替代innerHTML属性来指定javascript代码

    <div id="box">测试文字</div>
    <button id="btn">动态添加样式</button>
    <script>
    function loadScript(str){
        loadScript.mark = 'load';
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.text = str;
        document.body.appendChild(script);
    }
    btn.onclick = function(){
        if(loadScript.mark != 'load'){
            loadScript("box.style.color = 'red'");        
        }
    }
    </script>

  • 相关阅读:
    Java并发基础10:原子性操作类的使用
    Java并发基础09. 多个线程间共享数据问题
    Java并发基础08. 造成HashMap非线程安全的原因
    Java并发基础07. ThreadLocal类以及应用技巧
    Java并发基础06. 线程范围内共享数据
    Java并发基础05. 传统线程同步通信技术
    Java并发基础04. 线程技术之死锁问题
    我是如何从通信转到Java软件开发工程师的?
    IOS 判断耳机插入/拔出
    海量数据处理
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/6383818.html
Copyright © 2011-2022 走看看