等待页面都加载完后再执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">

// window.onload=function(){
// alert(exist("getSpanText"));
// alert(exist("111"))
// }

function loadText(){
　　var spanValue = document.getElementById("getSpanText").innerHTML;
　　alert("spanValue = " + spanValue);
　　alert(exist("getSpanText"));
}
function exist(id){
　　var s=document.getElementById(id);
　　if(s){
　　　　return true
　　}
　　else{
　　　　return false
　　}
}

</script>
</head>
<body onload="loadText()">
　　<span id="getSpanText">Jason</span》
</body>
</html>

页面加载之后立即执行一段 JavaScript：

<body onload="load()">

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

所有主流浏览器都支持 onload 属性。

定义和用法

onload 属性在对象已加载时触发。

onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element onload="script">

属性值

值 描述
script onload 发生时运行的脚本。

JS onload 事件

定义和用法

onload 事件会在页面或图像加载完成后立即发生。

语法

onload="SomeJavaScriptCode"
参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

image, layer, window

实例

在本例中，文本 "Page is loaded" 会被显示在状态栏中：

<html>

<head>

<script type="text/javascript">

function load()

{

window.status="Page is loaded"

}

</script>

</head>

<body onload="load()">

</body>

</html>

TIY

onload
如何使用 onload 在页面完成加载时在状态栏显示一段文本。

html/JS onload的详解的更多相关文章

  1. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  2. JS - Promise使用详解--摘抄笔记

    第一部分: JS - Promise使用详解1(基本概念.使用优点) 一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的. ...

  3. JS事件类型详解

    一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouse ...

  4. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  5. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  6. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

  7. 网站开发进阶(十三)window.onload用法详解

    window.onload用法详解 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...

  8. Js apply()使用详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  9. Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

随机推荐

  1. 升级Linux中的JAVA版本

    首先查看本机中的JAVA版本 如何需要卸载掉现有的JAVA版本的话,可以使用rpm -qa | grep java 和 rpm -e xxx --nodeps进行卸载 登录到JAVA官方下载界面,提供 ...

  2. php 中将完整的年月日时分秒的时间转换成 年月日的形式

    strtotime() 函数将任何英文文本的日期或时间描述解析为 Unix 时间戳(自 January 1 1970 00:00:00 GMT 起的秒数), 将完整的时间格式转换成时间撮的形式,再去进 ...

  3. docker部署生产环境下的tomcat

    1. dockerfile文件 FROM tomcat:7-jre8 WORKDIR /etc COPY ./Shanghai /etc/localtime WORKDIR /usr/share/zo ...

  4. 提高 iOS App 通知功能启用率的三个策略

    我们都知道推送通知在 App 运营中的作用巨大.但是,很多用户却并不买帐,App 第一次启动提示是否「启用推送通知」时,他们直接选择了「否」. 是的,最近我本人就转变成了这样的人 - 认真地评估每个应 ...

  5. python cookbook

    一 .数据结构 python collections包中 deque :固定长度队列,(例如固定长度的cache什么的) defaultdict:如果每个键值不存在,默认返回值 orderdict:有 ...

  6. Oracle PL/SQL学习之Hello World（0）

    1.PL/SQL是Oracle数据库的一大创举,让一些复杂繁琐的常规主流编程代码做的编码处理过程,只需要在PL/SQL中使用简短的几句代码就可以解决,并且准确高效.那么遵循惯例,我们学习PL/SQL编 ...

  7. springmvc.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  8. [CoffeeScript]在WebStorm里运行CoffeeScript

    CoffeeScript 是一门编译到 JavaScript 的小巧语言. 在 Java 般笨拙的外表下, JavaScript 其实有着一颗华丽的心脏. CoffeeScript 尝试用简洁的方式展 ...

  9. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  10. pymysql 各种坑总结

    pymysql各种坑只针对自己的项目1.关于关闭连接,报错为:pymysql.err.InterfaceError: (0, '') 这个错误原因:对已经关闭的链接再次进行操作,参考MySQL.err ...