加载页面或返回到页面时不触发 onload 事件处理程序

最新推荐文章于 2023-03-27 13:43:52 发布
转载 最新推荐文章于 2023-03-27 13:43:52 发布 · 7.9k 阅读 · 0

本文详细介绍了在框架集环境中遇到的顶级框架加载事件处理程序未触发的问题，并提供了解决方案，通过添加onunload事件处理程序来解决此问题。通过两个示例代码演示了如何实现这一解决方案。

症状

当您跟踪链接在框架集中顶框架, 然后返回到启动位置, 页 onload 事件处理程序， 目标不触发。


解决方案

要解决此问题, 添加 onunload 事件处理程序。以便它将激发 （但不知道如何完成此操作） 这开启 onload 事件处理程序。


状态

Microsoft 已确认这是列出了本文 " 适用于 " 一节中 Microsoft 产品中存在错误。

方案1：

1.

frame.htm 和 test.htm 保存到 Web 服务器。

frame.htm

<html>
<frameset rows="*,*">
<frame src="test.htm">
</frameset>
</html>

test.htm

<HTML>
<HEAD>
<SCRIPT language='JavaScript'>
function testMessage()
{
alert("onload");
}
</SCRIPT>
</HEAD>
<BODY onload="testMessage()">
<a href="http://www.microsoft.com" target="_top">test</a><br>
</BODY>
</HTML>

2.

使用 Microsoft Internet Explorer Macintosh 查看 frame.htm。 将出现对话框框表示为框架 onload 事件处理程序已触发。

3.

单击链接以查看其他网页顶部框架中。

4.

单击 后退 按钮。 不触发 onload 事件处理程序。

5.

如果添加下列 onunload 事件处理程序, 不会发生此问题。

<BODY onload="testMessage()" onunload="">


方案2：


把OnLoad（）事件修改，不用onload事件，随便用个事件名替换它，入Winload();

然后在框架代码的下方加入这个事件的调用即可；

如：

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=gb2312">

<SCRIPT LANGUAGE=javascript>

<!--

//解决页面加载时无法进入onload的问题

function winOnload() {

alert(“替换Onload事件”);

}

//-->

</SCRIPT>

<TITLE>评分环境检测系统</TITLE>

</HEAD>

<BODY>

</TABLE><SCRIPT LANGUAGE="JavaScript">

<!--

//从新处理设置的路径参数

document.getElementById("ifControl").src="about:Blank";

document.getElementById("ifSave").src="about:Blank";

document.getElementById("ifInfo").src="Post.asp"

//解决页面加载时无法进入onload的问题 winOnload();

//-->

</SCRIPT>

</BODY>

</HTML>



事实证明下面这种方法有时更有有效

微信小程序路由再次跳转不触发onload
heerey525
06-14 6102
情况： 1、从index页面跳转（wx.navigateTo）到add页面，第一次会进入add页面onLoad，但是第二次从index页面跳转（wx.navigateTo）到add页面，则不会进入add页面的onLoad； 2、从add页面跳转（wx.redirectTo）到index页面，不会进入index页面onLoad 原因： 在首次进入一个页面的时候，会进入该页面的onLoad，但是跳来跳去，其实路由并没有销毁，该页面已经存在路由栈，所以被缓存起来，并不会再次进入onLoad 解决方法： 1、在on
微信小程序之分享页面如何返回首页的示例
08-27
总的来说，微信小程序的页面返回和分享功能需要开发者根据实际需求进行定制。通过在分享配置中指定首页路径，并在首页的`onLoad`中检查参数，我们可以实现用户从分享页面直接返回首页的效果。同时，合理的设计和布局...
记：uniapp返回页面不触发onLoad事件
热门推荐
tsang荒男的博客
03-30 1万+
在uni中，我们返回上一页的时候，会发现onLoad方法没有作用； 其实在uni中，返回页面是不会触发onLoad方法，不过会触发onShow方法 如果我们想要返回上一页，获取数据。可以使用onShow方法 onShow(){ this.getCardList() }, ...
浏览器返回按钮不会触发onLoad事件
weixin_34128501的博客
08-21 290
浏览器返回按钮不会触发onLoad事件 正文 　　最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, 如果在提交成功后没有对按钮进行处理, 那么返回后按钮依然是loading状态, 这种体验很差, 如下图: 此问题是由于某些浏...
js后退页面不重新加载_前端单页面应用
weixin_39805087的博客
12-01 1591
1、概念什么是单页应用呢？单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用...
uniapp 组件内onLoad里调用的方法不执行
qwyio的博客
05-19 2426
问题背景： 考虑到代码的复用性，对部分代码进行了封装，在组件内去初始化接口数据，却迟迟没有接口响应，经过最终的排查，发现问题出现在uniapp的生命周期上。 uniapp官方文档上明确写出：uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。组件里没有页面级的onLoad等生命周期 uni-app的组件中可以直接使用Vue的生命周期函数进行处理 解决方案： 使用vue的生命周期函数 mounted mounted(){ } ...
NET Core MVC 页面的动态资源没有加载出来解决方案
qq_53679247的博客
03-31 1493
解决方案： 观察模板页与当前页面是否具有重复的JQ或JS引用，如果存在删除其中一个页面中的引用就OK了 所以细节又是一个细节 以下是出问题的截图 如果你遇到了页面动态资源或者css资源没有加载出来请看这篇文章 NET Core MVC 页面刷新后css文件丢失的解决方案 ...
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
10-15
而`onShow`方法则适用于页面每次显示时，包括从后台切换到前台或者从其他页面返回时： ```javascript // 页面显示/切入前台时触发。 onShow: function () { // 页面初始化 options为页面跳转所带来的参数 var ...
微信小程序之onLaunch与onload异步问题详解
10-17
在 `onLoad` 中，调用 `userLogin` 并使用`.then` 和 `.catch` 处理返回的结果，确保在有数据时进行页面渲染，无数据或出现错误时进行相应处理。 通过这种方式，我们不仅解决了 `onLaunch` 和 `onLoad` 异步执行的...
解决IE中img.onload失效的方法
tmeteor的专栏
10-09 2012
最近在做web开发，其中有一个需求：利用Javascript获取要加载的图片的尺寸，所以很自然的，我就想到了img的onload方法，在firefox下开发完成后，我到IE下调试，发现img的onload事件很多情况下都不被调用。我最初的代码如下：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www
移动端浏览器回退上级页面不执行js的原因和解决方案
weixin_45532305的博客
06-29 3414
在开发移动端项目时遇到了一个问题，是关于ios机制和浏览器缓存的。 1. 问题描述 页面逻辑：页面中存在另一个链接，通过链接跳转页面，在点击浏览器导航回退时。发现上级页面会不执行js操作(页面不会重新加载，会直接读取浏览器缓存) 展现结果：返回后页面不刷新，一些失效的信息依然显示在页面上 机型：这个问题会在iphone和部分android内置浏览器(vivo nex内置浏览器、华为荣耀手机)发生。 产出原因：这一切都是页面的缓存数据搞的鬼。什么是页面的缓存数据？浏览器的“往返缓存(back-forward
【iosH5页面调用window.history.go(-1)返回上一页不会刷新/重新加载】
qq_43485554的博客
12-14 2388
这里写自定义目录标题项目场景：在ios中插入H5页面调用window.history.go(-1)返回上一页不会刷新/重新加载问题描述：在H5页面的实际开发中，相信大家都会碰到这样一个问题，安卓使用window.history.go(-1)返回页面的时候会刷新，但是ios有时会直接调用缓存，不会刷新页面解决方案：用onpageshow事件监听页面是直接从服务器上载入还是从缓存中读取。原理分析 项目场景：在ios中插入H5页面调用window.history.go(-1)返回上一页不会刷新/重新加载 提示：这
浏览器通过导航栏按钮后退前进时页面js不执行（浏览器的back-forward cache）
GaryCheung的博客
01-20 2580
问题描述：若存在一个页面包含超链接，点击跳转之后，此时点击浏览器的后退按钮的话，页面是不会重新渲染的（js什么的是不会再执行的，页面也不会重新挂载，通过观察 document.addEventListener（‘load’,handler）这里的handler不执行可以得出），这是因为浏览器的“往返缓存(back-forward cache - bfcache)”特性。 问题根源：back-for...
javascript window.onload不会执行的原因
newmiracle学习天地
06-08 1824
javascript window.onload不会执行的原因 1 js报错了 建议使用"use strict"; 来看 全部变量可以用var aa=2; aa=2;解决 2 引用了第三方js 查看原文：http://newmiracle.cn/?p=1635
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
asdfgh0077的博客
06-30 471
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
editormd 踩坑----图片上传成功无法回显
我真的不想继续爆零了啊的博客
12-08 1793
首先夸一波 editormd ，开源又好用。 接下来直奔主题！！！ 关于 editormd 图片路径回显的问题网上有很多博客，这里就不重复讲了，这里重点讲的是浏览器安装了插件（比如某雷下载助手） 这货坑了我一晚上。。。。 当我们点击本地上传，选好图片几点确定的时候，如果你的配置没有错误的话那应该能够回显上传路径。 如果你的配置都没有错结果无法回显路径的时候，这时候注意了，看看你的浏览器是否装了第三方插件，如果是的话，最简单的处理方法就是关掉插件。 但是！！！！ 我既想用插件又想用 editormd 那
uniapp onLaunch和onLoad执行顺序，页面返回会出现问题，一直加载中
qq_42440919的博客
03-27 4440
App.vue什么时候执行，第一次进入该系统执行，如果是该系统自己页面返回自己页面，不会重新进入app.vue，但是page.vue会触发onLoad（安卓手机）。所以就会出现一个问题，就是返回的时候，page.vue中触发了onload，但不进去app.vue，await this.$onLaunched就会一直等待。首先，安卓手机，页面返回（自己系统页面返回自己系统页面），不会进去app.vue，但是会触发页面page.vue的onload。page.vue具体页面里面。
钉钉小程序 页面被缓存后，传值改变onLoad监听不到
最新发布
08-07
在钉钉小程序中，当页面被缓存后，`onLoad` 方法不会再次触发，即使传入的参数发生变化。这是因为钉钉小程序的页面生命周期机制中，`onLoad` 仅在页面首次加载时执行一次，而页面缓存后再次进入时不会重新调用 `onLoad`。为了解决页面缓存后传值改变但无法触发 `onLoad` 的问题，可以采用以下方案： ### 使用 `onShow` 生命周期替代 `onLoad` 处理数据更新 钉钉小程序支持 `onShow` 生命周期函数，该函数在页面显示时被调用，包括从下级页面返回时。因此，可以将原本在 `onLoad` 中处理的数据更新逻辑移至 `onShow` 中执行，以确保页面显示时能获取最新的传参并更新页面内容。 ```javascript Page({ data: { params: {} }, onLoad(options) { // 初始加载时获取参数 this.setData({ params: options }); }, onShow() { // 页面显示时重新获取参数并更新 const options = this.options || {}; // 获取当前页面参数 this.setData({ params: options }); this.handleDataUpdate(options); // 自定义数据处理函数 }, handleDataUpdate(options) { // 处理参数变化后的逻辑 console.log('当前参数：', options); } }); ``` ### 手动监听参数变化并触发更新 如果页面数据依赖于传入的参数，可以在 `onShow` 中手动判断当前参数是否发生变化，并根据变化触发相应的数据更新操作。这样即使页面被缓存，也能确保在参数变化时更新页面内容。 ```javascript Page({ data: { lastParams: {}, params: {} }, onLoad(options) { this.setData({ params: options, lastParams: options }); }, onShow() { const currentParams = this.options || {}; if (JSON.stringify(currentParams) !== JSON.stringify(this.data.lastParams)) { this.setData({ params: currentParams, lastParams: currentParams }); this.handleDataUpdate(currentParams); } }, handleDataUpdate(params) { console.log('参数更新，执行数据加载：', params); } }); ``` ### 使用全局状态管理或事件机制 对于需要跨页面共享或响应参数变化的场景，可以使用全局状态管理（如 `globalData`）或事件总线机制，在页面显示时订阅相关事件并更新数据，避免依赖 `onLoad` 的调用。 ```javascript // app.js globalData = { currentPageParams: {} }; // page.js const app = getApp(); Page({ onShow() { const currentParams = this.options || {}; if (JSON.stringify(currentParams) !== JSON.stringify(app.globalData.currentPageParams)) { app.globalData.currentPageParams = currentParams; this.handleDataUpdate(currentParams); } }, handleDataUpdate(params) { console.log('全局参数更新，执行数据加载：', params); } }); ``` ### 总结 钉钉小程序页面缓存后，`onLoad` 不会再次触发的问题可以通过使用 `onShow` 生命周期、手动监听参数变化、结合全局状态管理等方式解决。这些方法可以确保页面在参数变化时仍能正确更新数据，提升用户体验。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值