HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例

最新推荐文章于 2024-06-28 10:17:09 发布
最新推荐文章于 2024-06-28 10:17:09 发布
阅读量6.1k 收藏
点赞数
分类专栏： javascript

HTML网页中的html body onload自动跳转方法介绍  

  html body onload就是“页面加载完成后执行的动作”。一般写在body里面。例如，在html页面中有一个大图片，想要在图片显示出来后提示一个消息框“图片加载完成”，如果你直接写在JS里function（）{alert（“图片加载完成”）;}因为代码执行顺序是从上到下一次执行，图片还没加载，而函数已经执行那么就不合理了，所以用onload方法，就是为了等页面的东西都加载完了才执行。

    在网页加载时通过onload事件指定parent.location进行自动跳转。

    示例如下：

1
<body onLoad="parent.location='http://www.169it.Com'"> www.169it.com


window.onload和body中的onload事件对比

    在js的代码中用了window.onload后,可能会影响到body中的onload事件。你可以全写在body 中，也可以全放到window.onload中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window.attachEvent和 window.addEventListener来解决一下。

1
2
3
4
5
if (document.all){
  window.attachEvent('onload',函数名)//IE中
}
else{
  window.addEventListener('load',函数名,false);//firefox
zhy_me
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html body的onload事件详解
s15981924260的专栏
04-08 1万+
浏览器是边加载边执行的，
微信小程序 onLoad函数中页面跳转 not found page
乱写乱画
09-30 771
原因：小程序启动时，所有页面未加载完成，所以未能找到页面 解决：加个定时器 setTimeout(function () { wx.navigateTo({ url: '/pages/home/home', }) }, 500)
页面跳转的几种方法
最新发布
(黎子)人生编码
06-28 1155
HTML5 History API 允许我们操作浏览器的会话历史记录（session history），它包括和方法，以及popstate事件。
HTML body onload 事件属性
evilcry2012的专栏
01-09 2404
HTML onload 事件属性 HTML 事件属性 实例 页面加载之后立即执行一段 JavaScript： onload="load()"> 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera          
html onload不起作用,body标签onLoad执行无效，为何？
weixin_33293848的博客
06-20 2438
Example:// your code right here......// your code right here......[导读]HTML页面中直接使用onLoad()来绑定方法，保证：页面元素加载完成后才开始执行方法，避免selector获得的元素为null但是，页面运行效果在chrome中显示正常，没有出错，但页面上传至服务器后再访问，页面显示为空，没有出现该出现的元素，为何为出现这...
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
《春馨梦》的专栏
03-17 1万+
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。 情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */ function loadBody(){ console.log("load
网页自动跳转代码收集
12-11
以下是一些不隐藏转向之后地址的网页自动跳转代码示例： 1. **代码一**： 这个代码使用JavaScript的`setTimeout`函数来实现延迟跳转。页面加载后，`count`函数每100毫秒执行一次，增加进度条的长度，直到达到99%时...
HTML页面3秒后自动跳转的三种常见方法
09-28
在网页开发中，有时我们需要实现页面在特定时间后自动跳转到另一个页面的功能。这里将详细解释HTML页面3秒后自动跳转的三种常见方法。 方法1：使用`<meta>`标签 这种方法是最简单直接的，它通过在HTML文档的`<head>...
网页自动跳转代码html有进度条
11-18
"网页自动跳转代码html有进度条"这个主题就是关于如何在HTML中实现自动跳转并显示进度条的过程。 首先，我们需要创建一个基本的HTML文件结构。HTML（超文本标记语言）是网页的基础，用于定义网页内容和结构。在HTML...
用javascript实现的电信铁通（网通）自动跳转源代码
10-30
### 使用JavaScript实现电信铁通（网通）自动跳转的知识点详解 #### 一、背景介绍 随着互联网技术的发展，用户上网的方式多种多样，包括通过不同的网络运营商接入互联网。在中国，主要的网络运营商有电信、网通（现...
网页定时跳转代码实例适用于asp，php，html定时跳转网页
09-17
网页定时跳转是一种常见的网页交互功能，用于在用户打开页面后，在特定时间间隔后自动将页面重定向到另一个URL。这种技术在很多场景下都非常实用，例如广告展示、页面更新通知或者临时页面的过渡等。在ASP、PHP和...
window的onload()的使用
zmt0104的博客
11-28 3912
1. window.onload有什么作用?   用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 2. window.onload的使用 只有一个函数funcRef()时： window.onload = funcRef; 有多个要执行的函数时： window.onload=function(){ Func1(); Func2(); ...
html body onunload,html页面的onunload、onbeforeunload
weixin_39956558的博客
06-19 239
function getBO() {ret = confirm("你是否要关闭窗口");if(ret){ret1 = confirm("你是否要收藏页");if(ret1){external.addFavorite('网址','收藏名称')}this.close();}}//必须写在script内，如果body onload =... onbeforeunload=...，firef...
html事件unload,jQuery之load、unload、onunload和onbeforeunload - liuyueyue
weixin_34377037的博客
06-08 794
1.load：jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法：$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的...
js获得页面get跳转的参数
程序新视界
08-04 2999
通过js获得页面跳转参数 页面通过window.location.href或通过window.parent.location.href进行页面跳转，在新的页面如何获得相应的参数呢？ window.location.href方式 其中去除“#”号是因为url参数中还添加了#的参数。 function GetRequest(name) { var url = window.location.s...
html body 中onload 属性的作用是什么
lxyso的专栏
11-14 1424
onload故名思语就是“页面加载完成后执行的动作”。一般写在body里面。举个例子，在html页面中有一个大图片，想要在图片显示出来后提示一个消息框“图片加载完成”，如果你直接写在JS里function（）{alert（“图片加载完成”）;}因为代码执行顺序是从上到下一次执行，图片还没加载，而函数已经执行那么就不合理了，所以用onload方法，就是为了等页面的东西都加载完了才执行。
几种常见网页自动跳转方法
热门推荐
酒樽舞曲的博客
03-16 2万+
<br />种常见网页自动跳转方法对SEO的影响<br />网页自动跳转，是指当用户访问某个网页时，被自动跳转到另一个网页中去。网页自动跳转的主要作用<br />是，当域名变更后，或者网站里的一个或多个网页被删除后，可以使用这种方式将用户引导到其它正常<br />的网页中去，从而留住用户。<br /> 不过，现在有许多人利用网页自动跳转来进行作弊，欺骗搜索引擎，从而实现提高网站搜索引擎排名的<br />目的。比较典型的方式是：先做一个“桥页”，当搜索引擎收录了这个桥页，并有较高排名时，桥页中<br />再
网页打开新窗口——Window.open()详解
ardo_pass的博客
12-23 5088
[html] view plain copy Window.Open详解         一、window.open()支持环境：   JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+      二、基本语法：   window.open(pageURL,name,parameters)    其中：   p
编写一个进度条加载网页动画，加载到100%，使网页自动跳转到百度网站
07-15
您可以使用JavaScript和CSS来创建一个进度条加载网页动画，并在加载完成后自动跳转到百度网站。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条加载网页动画</title> <style> #progress-bar { width: 100%; height: 10px; background-color: #f0f0f0; position: fixed; top: 0; left: 0; z-index: 9999; } #progress { width: 0%; height: 100%; background-color: #007bff; transition: width 0.5s ease-in-out; } </style> <script> window.onload = function() { var progressBar = document.getElementById("progress"); var interval = setInterval(function() { progressBar.style.width = progressBar.offsetWidth + 10 + "px"; if (progressBar.offsetWidth >= window.innerWidth) { clearInterval(interval); window.location.href = "https://www.baidu.com"; } }, 50); }; </script> </head> <body> <div id="progress-bar"> <div id="progress"></div> </div> </body> </html> ``` 在上述代码中，我们创建了一个进度条加载网页动画。当页面加载完毕后，通过 `window.onload` 事件触发的回调函数开始执行。我们使用 `setInterval` 方法定时更新进度条的宽度，每次增加10像素，直到进度条的宽度达到页面宽度时，清除定时器并将页面自动跳转到百度网站。 请确保将代码保存为HTML文件并在浏览器中打开运行。注意，由于跳转到其他网站是一种突然的行为，可能会被部分浏览器拦截，请确保浏览器设置允许自动跳转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值