页面onload 传入多个js函数

最新推荐文章于 2023-06-03 17:21:08 发布
最新推荐文章于 2023-06-03 17:21:08 发布 · 114 阅读 · 0

本文介绍了如何使用`addLoadEvent`函数来确保JavaScript代码在页面加载完成后执行，通过为`window.onload`添加回调来实现页面加载事件的高效处理。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(a1);
addLoadEvent(a2);
addLoadEvent(a3);
iteye_18388
关注
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1167
业务需求：在body里面创建一个div元素，点击div元素能够复制div节点，将复制后的div加载到原有的div节点后面，并且重新设置克隆后的div节点的样式。 JS代码特点：在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g
窗口加载事件的正确设置方法
iteye_14053的博客
08-08 272
[code="js"] function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonloa...
JS中常用函数（一）启动运行函数addLoadEvent
u014041540的博客
07-20 532
function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!='function'){                //判断onload上是否绑定函数 window.onload=func }else{ window.onload=function(){  oldonload();
js (function(){}())与(function(){})()自启动函数
weixin_43294560的博客
12-23 497
(function(){}())与(function(){})() 这两种写法，都是一种立即执行函数的写法，即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。 ...
窗口加载
Daci Studio
07-24 375
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式: 一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。 二.通过window.onload来执行脚本代码。 第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么windo...
window.onload加载多个值
ohanweb123的博客
08-21 502
用外部js文件(而不是嵌入式事件处理函数)会带来一个问题。无论什么时候使用DOM方法，都必须存在一个完整的文档对象模型才行。如果文档没有被完全载入，DOM就是不完整的。当浏览器从服务器端获取网页时，它会按照页面从上至下的顺序进行解析，并依次创建节点数。当它读取到head元素时，或许会碰到指向外部JavaScript文件的<script>标签，这时浏览器会把那个JavaScript文件读取进来，然后再
把多个JavaScript函数绑定到onload事件处理函数上的方法
10-21
总结来说，将多个JavaScript函数绑定到onload事件处理函数上的一个关键点是理解不能直接将多个函数赋值给window.onload，因为这会导致后面的赋值覆盖前面的函数。使用addLoadEvent函数，可以有效地解决这个问题，...
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
01-23
然而，当有多个函数需要在页面加载完成后执行时，直接将它们都绑定到`onload`事件可能会导致问题，因为`onload`事件只能处理一个函数。为了解决这个问题，我们可以使用一种技术叫做“事件监听器的封装”，这里以`...
窗口加载事件
渴望飞翔的小白
06-03 1002
是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用所处理函数。或者有了window.onload就可以把JS代码写到页面元素的上方因为onload是等页面内容全部加载完毕，再去执行处理函数window.onload 传统注册事件方式，只能写一次如果有多个，会以最后一个window.onload为准如果使用addEventListener 则没有限制。
打开页面自动调用的js函数
weixin_45609811的博客
09-09 2486
假设open()就是我们想一打开界面就调用的方法 <script> function open(){ active1=document.getElementById("picture1"); active1.style.display="block"; active2=document.getElementById("picture2"); active...
JavaScript 自调用函数, 打开页面自动执行
优快云_33901573的博客
05-05 776
JavaScript 自调用函数, 打开页面自动执行。
js窗口加载事件
Guoxuxinwen的博客
03-04 3315
window.onload = function(){} 或者 window.addEventListener("load",function(){}) window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。 注： 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容...
onload事件绑定多个javascript函数代码
weixin_30634661的博客
07-25 164
onload事件是让这个函数只在网页加载完成后才得以执行，特别是在DOM操作中，XHTML文档加载完成之前，DOM是不完整的。下面来看看onload具体应用：window.onload=functionname;//functionname函数名；假设我们要加载两个函数：first()和second()；如果你写成这样： window.onload=first;window.onload=sec...
JavaScrip BOM 窗口加载事件
绿色水杯
09-11 430
window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数 注意： 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。 window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。 如果使用 addEventListener 则没有限制 DOMContentLoaded
Window对象的常见事件之窗口加载事件
2302_76195408的博客
02-03 550
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时使用DOMContentLoaded事件比较合适。window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数。DOMContentLoaded是DOM加载完毕，不包含图片，flash，css等就可以执行，加载速度比load更快。load等页面内容全部加载完毕，包含页面dom元素，图片，flash，css等。
JavaScript中的立即执行函数
m0_67198021的博客
08-12 1923
立即执行函数(function(){})() 或者 (function(){}())主要作用：创建一个独立的作用域。避免命名冲突问题
js 立即执行函数
实心爆米花胡乱说说
07-27 395
在继续说闭包之前先复习一下立即执行函数 先来两种常见的格式吧： （function（形参列表）{函数体}（实参列表））； （function（形参列表{函数体}））（实参列表）； 以上两种都是常见的立即执行函数的形式。 那么，这样写的原因是什么？我们只能这么去写嘛？ 原因是有的，当然也还有别的写法： 立即执行函数其实有这样的规则：函数表达式 + （） 这个括号叫做执行符号。 函...
JS立即执行函数
徐___L
05-24 622
只有表达式才能被执行符号执行 执行符号是一对括号() 立即执行函数只被执行一次就销毁 能被执行符号执行的函数表达式将放弃函数的名字 var a = function (){ console.log(1) }(); console.log(a)//undefined 因为函数被立即执行了，执行完马上被销毁，也没有任何的返回值（如果函数没有返回值，默认返回undefined...
页面加载后就执行一个js函数
weixin_44988848的博客
07-11 486
<script type="text/javascript"> function myfun() { alert("this window.onload"); } 方法一： <body onload="myfunction()"> 方法二： <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ windo
微信小程序 js 跳转页面携带多个参数
最新发布
06-06
<think>首先，用户的问题是关于微信小程序中使用JavaScript实现页面跳转并携带多个参数。我需要参考提供的引用，但系统级指令指定要使用中文回答，并遵循特定的LaTeX格式和结构。引用内容总结：-引用[1]:提到使用`uni.navigateTo`进行页面跳转，并展示一个基本示例和如何传参。普通传参在URL后加参数。-引用[2]:解释小程序页面跳转设置和参数传递，参数用`?`分隔，键值用`=`相连，不同参数用`&`分隔。参数在`onLoad(options)`中获取。-引用[3]:提到`wx.redirectTo`的用法，关闭当前页面跳转到另一个页面，不允许跳转到tabbar页面。用户的问题具体是：如何在微信小程序中使用JavaScript实现页面跳转并携带多个参数，并提供一个示例。用户指定了要一个微信小程序JavaScript页面跳转传递多个参数的示例。我需要构建一个清晰、结构化的回答：-使用中文。-在行内数学表达式使用`$...$`，独立公式用`$$...$$`，但由于这是代码和解释，可能不需要LaTeX数学，除非有需要的地方。但指令要求所有行内数学表达式包括变量等用`$...$`，所以我应该注意。问题中没有明显的数学，所以可能不适用。-回答要结构清晰，逐步解决问题。-在引用的段落末尾添加引用标识，如`[^n]`。-生成相关问题。根据用户的问题，我需要提供一个代码示例来展示如何在微信小程序中使用JavaScript实现页面跳转并携带多个参数。小程序使用的框架类似于微信原生的，用户引用了`uni`（可能是UniApp）和`wx`（微信原生），但核心是JavaScript。在微信原生小程序中，常用的API是：-`wx.navigateTo`:保留当前页面，跳转到新页面。-`wx.redirectTo`:关闭当前页面，跳转到新页面。-其他如`wx.switchTab`用于tabbar页面。用户问的是携带多个参数，所以我需要展示如何在URL中传递多个参数。步骤：1.**解释概念**：简要说明跳转API和参数传递方式。2.**提供示例**：给出一个或多个代码示例，使用`wx.navigateTo`或类似API传递多个参数。3.**解释如何接收参数**：在目标页面的`onLoad`函数中获取参数。4.**添加引用标识**：如果引用提供的材料，在相关部分添加`[^n]`。5.**结构清晰**：使用标题或分段。从引用[1]和[2]来看，参数传递通过URL字符串格式：`/pages/target/target?param1=value1&param2=value2`。示例代码：-跳转页面时：`wx.navigateTo({url:'/pages/target/target?name=John&age=30'})`-在目标页面：在`onLoad(options)`中，`options.name`和`options.age`来获取值。确保使用中文回答。结束部分生成相关问题：-基于主题，生成相关问题，如用户指令指定。相关问题建议：1.如何在跳转时传递对象或数组参数？2.页面跳转后参数如何处理？3.不同跳转API的区别？如`wx.navigateTo`vs`wx.redirectTo`。4.如何处理参数编码问题？现在构建回答大纲：1.**介绍**：简要描述页面跳转API。2.**参数传递方法**：解释URL参数格式。3.**示例**：展示代码示例。4.**接收参数**：说明在目标页面如何获取。5.**注意事项**：可能涉及参数编码。6.**相关问题**：生成相关问题。最后添加引用标识：在解释时，如果参考了[1]或[2]，添加`[^1]`或`[^2]`。实际回答中：-在提到URL格式时，参考引用[2]，添加`[^2]`。-在提到跳转API时，参考引用[1]或[3]。最终回答应该以用户问题结束：提供一个完整的示例。</think> ### 微信小程序中使用JavaScript实现页面跳转并携带多个参数 在微信小程序开发中，页面跳转是一种常见操作，用于在不同页面间导航并传递数据。主要通过JavaScript API实现，如 `wx.navigateTo`（保留当前页面跳转）或 `wx.redirectTo`（关闭当前页面跳转）。携带多个参数时，采用URL编码格式：在跳转路径后添加 `?` 分隔符，参数键值对用 `=` 相连，多个参数之间用 `&` 分隔。目标页面通过 `onLoad(options)` 生命周期函数接收这些参数[^1][^2]。下面我将一步步解释并提供一个完整的示例。 #### 1. **页面跳转API概述** - `wx.navigateTo`: 保留当前页面，跳转到新页面，适合需要返回的场景（例如从详情页返回列表页）。 - `wx.redirectTo`: 关闭当前页面，跳转到新页面，适合不需要返回的场景（如登录后跳转主页）。 - **注意**: 这些API不能用于跳转到tabbar页面（需用 `wx.switchTab`），并且参数支持字符串形式[^1][^3]。 - **参数传递规则**: 参数以查询字符串形式附加到URL末尾。例如，传递 `name` 和 `age` 参数时，格式为 `/pages/target?name=John&age=30`。目标页面在 `onLoad` 中通过 `options` 对象获取[^2]。 #### 2. **如何实现携带多个参数的跳转** - **步骤简述**: 1. 在源页面使用 `wx.navigateTo` 或类似API设置URL，包含多个参数。 2. 使用URL编码确保参数安全（如空格用 `%20`）。 3. 在目标页面的 `onLoad` 函数中提取参数。 - **关键点**: - 参数必须是字符串类型；若要传递数组或对象，需要序列化（如使用 `JSON.stringify()`），并在接收端解析。 - URL总长度有限制（微信小程序约128KB），避免过多参数[^2]。 #### 3. **完整代码示例** - **场景**: 从一个用户列表页面跳转到用户详情页面，携带用户ID、姓名和分数多个参数。 - **源页面代码 (如 pages/index/index.js)**: ```javascript // 源页面中的点击事件函数 Page({ navigateToDetail: function() { // 定义多个参数 const userId = "1001"; const userName = "张三"; const userScore = 95; // 数值类型需转为字符串 // 构建URL并携带参数（注意：参数值需编码） const url = `/pages/detail/detail?userId=${encodeURIComponent(userId)}&userName=${encodeURIComponent(userName)}&userScore=${encodeURIComponent(userScore)}`; // 使用wx.navigateTo跳转（保留当前页面） wx.navigateTo({ url: url }); } }); ``` - **说明**: - 使用 `encodeURIComponent()` 对参数值进行URL编码，防止特殊字符（如 `&`, `=`）导致错误。 - 示例中传递三个参数：`userId`, `userName`, `userScore`[^2]。 - **目标页面代码 (如 pages/detail/detail.js)**: ```javascript // 目标页面的Page对象 Page({ onLoad: function(options) { // 接收参数（options自动包含URL中的查询参数） const userId = decodeURIComponent(options.userId || ''); // 解码并处理空值 const userName = decodeURIComponent(options.userName || ''); const userScore = decodeURIComponent(options.userScore || '0'); // 转为字符串处理 // 示例：在控制台打印参数或更新页面数据 console.log("Received parameters:", userId, userName, userScore); this.setData({ detailId: userId, detailName: userName, detailScore: userScore }); } }); ``` - **说明**: - 使用 `decodeURIComponent()` 解码参数。 - 处理空值以避免运行时错误（如 `options.param || 'default'`）。 - 参数获取后可用于设置页面数据或API调用[^2]。 #### 4. **注意事项** - **参数类型处理**: 若要传递数组或对象，需在源页面序列化： ```javascript const data = { list: [1, 2, 3], status: 'active' }; const jsonData = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `/pages/target?data=${jsonData}` }); // 目标页面: const data = JSON.parse(decodeURIComponent(options.data)); ``` - **性能优化**: 避免传递大型数据，使用全局变量或缓存（如 `wx.setStorageSync`）代替，减少URL长度限制影响。 - **API选择**: - 用 `wx.navigateTo` 保存历史栈，适合多步导航。 - 用 `wx.redirectTo` 节省内存，适合单步流程[^3]。 - **编码问题**: 总是使用 `encodeURIComponent` 和 `decodeURIComponent` 来处理参数，防止无效URL[^2]。 #### 5. **相关问题** - 如何传递对象或数组参数而不暴露在URL中？ - 页面跳转时如何处理参数值包含特殊字符（如 `&` 或 `=`）？ - `wx.navigateTo` 和 `wx.redirectTo` 在性能上有什么差异？ - 小程序中如何实现后退并携带参数？ 如果您有更多具体场景（如嵌套参数或动态页面），请提供细节，我会进一步优化示例！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值