标签： jQuery

一个优秀的Javascript库

关于JavaScript中动态加载script标签的说明

在使用JavaScript开发时，有时除了需要在head标签内直接引入script标签外，还会需要根据代码逻辑的执行状态去动态引入script脚本，并且我们也可能希望在脚本文件加载完成后触发我们需要运行的function。
我们可以通过以下两种方法实现：

一、使用标准DOM方法：

// 定义脚本加载完成回调方法
var callback = function () {
    alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 定义判断脚本是否加载完成的标识
var done = false;
// 创建script标签
var script = document.createElement("script");
// 设置script标签属性
script.type = "text/javascript";
script.language = "javascript";
script.src = url;
// 绑定脚本加载完成事件
script.onload = script.onreadystatechange = function () {
    // 判断脚本是否加载完成并且事件未触发过
    if (!done && (!script.readyState || script.readyState == "loaded" || script.readyState == "complete")) {
        // 标识脚本事件已触发过一次
        done = true;
        // 移除脚本加载完成事件
        script.onload = script.onreadystatechange = null;
        // 触发自定义的脚本加载完成回调方法
        if (typeof (callback) == "function") {
            callback.apply(script);
        }
    }
};
// 将script标签添加到head标签内
document.getElementsByTagName("head")[0].appendChild(script);

二、使用jQuery框架方法：

// 定义脚本加载完成回调方法
var callback = function () {
    alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 使用jQuery的ajax方法加载script脚本
jQuery.ajax({
    url: url,
    type: "GET",
    dataType: "script",
    success: function () {
        // 触发自定义的脚本加载完成回调方法
        if (typeof (callback) == "function") {
            callback.apply(this, arguments);
        }
    }
});

关于JavaScript中判断滚动条到底部的说明

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop（滚动条在Y轴上的滚动距离）、clientHeight（内容可视区域的高度）、scrollHeight（容可视区域的高度加上溢出滚动的距离）。从这个三个属性可以看出来，滚动条到底部的条件即为：

scrollTop + clientHeight == scrollHeight

一、使用标准DOM方法：

// 定义滚动条判断方法
(function (window, undefined) {
    if (typeof (window.getScrollTop) != "function") {
        // 获取滚动条在Y轴上的滚动距离  
        window.getScrollTop = function () {
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        };
    }
    if (typeof (window.getScrollHeight) != "function") {
        // 获取文档的总高度 
        window.getScrollHeight = function () {
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        };
    }
    if (typeof (window.getWindowHeight) != "function") {
        // 获取浏览器视口的高度 
        window.getWindowHeight = function () {
            var windowHeight = 0;
            if (document.compatMode == "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        };
    }
})(window);

// 添加滚动事件
window.onscroll = function () {
    // 判断是否滚动条是否在底部
    if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
        alert("滚动条在底部");
    }
};

二、使用jQuery框架方法：

// 定义jQuery对象
var $window = jQuery(window);
var $document = jQuery(document);
// 添加滚动事件
$window.scroll(function () {
    // 获取滚动条在Y轴上的滚动距离
    var scrollTop = $window.scrollTop();
    // 获取文档的总高度 
    var scrollHeight = $document.height();
    // 获取浏览器视口的高度 
    var windowHeight = $window.height();
    // 判断是否滚动条是否在底部
    if (scrollTop + windowHeight == scrollHeight) {
        alert("滚动条在底部");
    }
});

关于JavaScript中实现form和iframe异步文件上传的说明

在Web编程中，我们常常需要使用文件的上传功能。默认的普通文件上传功能是随form表单提交时执行上传的，表单提交的进程将伴随着文件上传进程。当需要上传的文件太大时，表单提交的时间将会大大增加，但是在表单提交期间我们又无法进行其他操作，因此异步文件上传就变成了Web编程中经常需要解决的问题。
下面介绍如何使用form结合ifame的方式实现简单的异步文件上传功能，其中关于HTML元素的操作使用了jQuery框架，当然有需要的也可以将这部分代码改写成标准DOM方式实现：

一、定义异步文件上传方法：

// 定义异步文件上传构造器
(function (window, jQuery, undefined) {
    // 判断异步文件上传构造器是否已经定义
    if (typeof (window.asyncUpload) == "function") {
        return;
    }
    /**
    * options：异步文件上传数据参数设置
    */
    window.asyncUpload = function (options) {
        if (!options) {
            options = {};
        }
        // 构造隐藏的form和iframe
        var name = new Date().getTime();
        var iframeName = "iframe_" + name;
        var formName = "form_" + name;
        var $div = jQuery("<div style='display: none'></div>").appendTo("body");
        var $iframe = jQuery("<iframe name='" + iframeName + "'></iframe>").appendTo($div);
        var $form = jQuery("<form name='" + formName + "' method='post' enctype='multipart/form-data' encoding='multipart/form-data'></form>");
        // 设置form提交到iframe中
        $form.attr("target", iframeName).attr("action", options.url).appendTo($div);
        // 剪切文件上传input到form中，并克隆新的文件上传input到原始位置
        if (options.files) {
            for (var key in options.files) {
                var $file = jQuery(options.files[key]);
                $file.clone(true).insertBefore($file);
                $file.appendTo($form).removeAttr("id");
            }
        }
        // 通过在form中创建隐藏的input来提交其他需要提交的数据
        if (options.params) {
            for (var key in options.params) {
                jQuery("<input type='hidden' name='" + key + "' />").appendTo($form).val(options.params[key]);
            }
        }
        // 绑定iframe的load事件
        $iframe.load(function () {
            // 触发上传完成响应事件
            if (typeof (options.callback) == "function") {
                var iframe = this;
                // 定义上传结果对象
                var data = {
                    responseText: "",
                    responseXML: ""
                };
                // 获取上传结果
                if (iframe.contentWindow) {
                    data.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null;
                    data.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : iframe.contentWindow.document;
                } else if (iframe.contentDocument) {
                    data.responseText = iframe.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null;
                    data.responseXML = iframe.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : iframe.contentDocument.document;
                }
                // 根据数据类型构造上传完成响应事件参数
                var args = null;
                var dataType = jQuery.trim(options.dataType);
                if (dataType == "json") {
                    // 将json字符串构造成JavaScript对象
                    eval("args = " + data.responseText + ";");
                    args = [args];
                } else if (dataType == "xml") {
                    args = [data.responseXML];
                } else {
                    args = [data.responseText, data.responseXML];
                }
                // 回调上传完成响应事件
                options.callback.apply(iframe, args);
            }
            // 移除并释放临时数据
            $div.remove();
        });
        // 提交表单
        $form.submit();
    };
})(window, jQuery);

二、参数说明：
该异步文件上传方法需要options对象参数，其中包括：

url：string，必填，上传提交地址

files：array，必填，上传的文件数组，支持DOM对象、jQuery对象、jQuery选择器

params：object，可选，其他需要提交的数据

dataType：string，可选，上传完成后响应的结果数据类型，可选值有xml、json、html，默认为html

callback：function，可选，上传完成后响应事件，事件参数为响应结果，参数类型以options.dataType定义为准

三、调用示例：
定义需要进行文件上传的input元素，该元素可以在HTML文档中body元素下任意位置：

<input id="file" name="file" type="file" />

在JavaScript中调用异步文件上传方法：

// 绑定文件上传input的change事件，使用户选择文件后自动触发上传
jQuery("#file").change(function () {
    // 开始异步文件上传
    asyncUpload({
        // 上传提交地址
        url: "upload.php",
        // 上传的文件数组
        files: [jQuery("#file")],
        // 其他需要提交的数据
        params: {
            text: "file"
        },
        // 上传完成后响应的结果数据类型
        dataType: "html",
        // 上传完成后响应事件
        callback: function (html, xml) {
            alert(html);
        }
    });
});

上传文件提交地址的服务端可以使用基本的获取上传文件方法对上传上来的文件进行操作，最后返回相应的响应数据即可。

 ©  LuYutao