• JS动态添加JavaScript语句


    原文章:http://www.cnblogs.com/suntrain/p/5663794.html

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

    动态加载外的外部JavaScript文件能够立即运行,比如下面的<script>元素。

    <script type="text/javascript" src="client.js"></script>

    而创建这个节点的DOM代码如下所示:

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "client.js";
    document.body.appendChild(script);

    显然这里的DOM如实的反映了相应的HTML代码。不过执行最后一行代码把<script>元素添加到页面之前,是不会下载外部文件的。也可以把这个元素添加到<head>元素中效果相同。整个过程可以使用下面的函数来封装:

    function loadscript(url) {
        var script = document.createElement("script");
        var script.type = "text/javacript";
        script.src = url;
        document.body.appendChild(script);
    }

    然后,就可以通过调用这个函数来加载外部的JavaScript文件了:

    loadScript("client.js");

    加载完成后,就可以在页面中的其它地方使用这个脚本了。

    另一种指定JavaScript代码的方式是行内方式,如下面的例子所示:

    <script type="text/javascript">
    function sayHi() {
        alert("hi");
    }
    </script>

    从逻辑上讲,下面的DOM代码是有效的:

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild(document.createTextNode("function sayHi() {alert('hi');}"));
    document.body.appendChild(script);

    在Firefox、Safari、Chrome和Opera中,这些DOM代码可以正常运行。但在IE中,则会导致错误。IE将<script>视为一个特殊的元素,不允许DOM访问其子节点。不过,可以使用

    <script>元素的text属性来指定JavaScript代码,想下面的例子这样:

    var script = document.creatElement("script");
    script.type = "text/javascript";
    script.text = "function sayHi() {alert('hi');}";
    document.body.appendChild(script);

    经过修改之后的代码可以在IE、Firefox、Opera和Safari3.0中运行。Safari3.0之前的版本虽然不能正确的支持text属性,但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari,可以使用下列代码:

    var script = document.createElement("script");
    script.type = "type/javascript";
    var code = "function sayHi() {alert('hi');}";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script)

    这里首先尝试标准的DOM文本节点方法,因为除了IE(在IE中会导致抛出错误),所有的浏览器都支持之中方式。如果这行代码抛出了错误,那么说明是IE,于是就必须使用text属性了,整个过程可以用以下函数来表示:

    function loadScriptString(code) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        try {
            script.appendChild(document.createTextNode(code));
        } catch (ex) {
            script.text = code;
        }
        document.body.appendChild(script);
    }
    loadScriptString("function sayHi() {alert('hi');}");;
  • 相关阅读:
    MYSQL实战-------丁奇(极客时间)学习笔记
    java并发编程实践——王宝令(极客时间)学习笔记
    分布式锁-----秒杀系统
    MYSQL IN 出现的慢查询问题
    携程2018年年度技术合集
    MySQL分库分表
    Mysql 千万级别数据数据查询
    视频协议融合平台人脸识别/车牌识别平台EasyCVR内调用接口二次开发疑难解答
    国标GB28181/Ehone协议视频人脸识别/车牌识别平台EasyCVR新版本支持大华SDK接入开发记录
    国标GB28181协议接入视频智能分析平台EasyCVR的设备用ws_flv为什么会有无法播放的情况?
  • 原文地址:https://www.cnblogs.com/lr-blog/p/7771615.html
Copyright © 2020-2023  润新知