百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

JavaScript代码嵌入HTML的方法、及两者的在执行流程上的细微区别

suiw9 2024-11-09 14:49 25 浏览 0 评论

为了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为 ：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

相关推荐

分布式系统核心概念及实现（分布式核心原理解析）

一、分布式系统核心概念1.分布式系统的定义分布式系统是由多个独立的计算机（节点）通过网络连接，协同完成任务的系统。这些节点可以是物理机、虚拟机或容器。...

nosql之mongodb（nosql数据库是国产的吗）

什么是MongoDB?MongoDB是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。...

如何治理非结构化数据?（非结构化化数据）

据调查，当前企业80%的数据为非结构化数据或半结构化数据，而结构化数据是他们管理的重点，非结构化数据却被忽视。然而，非结构化数据也有着它的价值。那么，如何治理非结构化数据？IDC调研显示，目前企业中8...

Cloudera收购大数据加密初创企业Gazzang

Hadoop供应商Cloudera刚刚收购了专门研究下一代数据存储环境加密技术技术的初创企业Gazzang，但交易细节并未透露。这是Cloudera的第一笔重大收购。Gazzang成立于20...

全网最全95道MongoDB面试题1万字详细解析

1、mongodb是什么？MongoDB是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB旨在给WEB应...

mongodb——视图（mongodb object）

MongoDB视图是一个可查询的对象，其内容由其他集合或视图上的聚合管道定义。MongoDB不会将视图内容持久化到磁盘。当客户端查询视图时，MongoDB可以要求客户端拥有查询视图的权限。MongoD...

mongodb的优缺点及应用场景（mongodb 优点 应用场景）

一、MongoDB是什么1、维基百科MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。...

5款Syslog集中系统日志常用工具对比推荐

一、为何要集中管理Syslog？Syslog由Linux/Unix系统及其他网络设备生成，广泛分布于整个网络。因其包含关键信息，可用于识别网络中的恶意活动，所以必须对其进行持续监控。将Sys...

跨平台、多数据库支持的开源数据库管理工具——DBeaver

简介今天给大家推荐一个开源的数据库管理工具——DBeaver。它支持多种数据库系统，包括Mysql、Oracle、PostgreSQL、SLQLite、SQLServer等。DBeaver的界面友好...

强烈推荐!数据库管理工具:Navicat Premium 16.3.2 (64位)

NavicatPremium，一款集数据迁移、数据库管理、SQL/查询编辑、智能设计、高效协作于一体的全能数据库开发工具。无论你是MySQL、MariaDB、MongoDB、SQLServer、O...

3 年 Java 程序员还玩不转 MongoDB，网友:失望

一、什么场景使用MongoDB？...

拯救MongoDB管理员的GUI工具大赏:从菜鸟到极客的生存指南

作为一名在NoSQL丛林中披荆斩棘的数据猎人，没有比GUI工具更称手的瑞士军刀了。本文将带你围观五款主流MongoDB管理神器的特性与暗坑，附赠精准到扎心的吐槽指南一、MongoDBCompass：...

mongodb/redis/neo4j 如何自己打造一个 web 数据库可视化客户端?

前言最近在做neo4j相关的同步处理，因为产线的可视化工具短暂不可用，发现写起来各种脚本非常麻烦。...

solidworks使用心得，纯干货!建议大家收藏

SolidWorks常见问题...

统一规约-关乎数字化的真正实现（规范统一性）

尽管数字化转型的浪潮如此深入人心，但是，对于OPCUA和TSN的了解却又甚少，这难免让人质疑其可实现性，因为，如果缺乏统一的语义互操作规范，以及更为具有广泛适用的网络与通信，则数字化实际上几乎难以具...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.