文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

在js跨域双向数据传递时可以用iframe加上location.hash来实现，在研究这个的时候深入学习了一下hash的特性。  ...当只有hash部分发生变化时，浏览器的历史记录会产生记录，但不会向服务器发出请求，这时按后退键地址栏的uri会变化但页面内容不变。  ...下面就讲述一下hash结合ajax的使用，ajax每次取数据时页面更新后浏览器并不产生历史记录，也就是说后退和前进按钮失去应用的效用，这时可以结合hash和window.onhashchange来使用，...注意ie6、7均不支持onhashchange，但可以用setInterval定期检查hash的改变，或者onload中检查的方法。  ...3.在使用window.onhashchange检测hash值获取历史数据。

889100
您找到你想要的搜索结果了吗？
是的
没有找到

BOM

是 W3C 标准规范  BOM 　　浏览器对象模型  　　把「浏览器」当做一个「对象」来看待  　　BOM 的顶级对象是 window  　　BOM 学习的是浏览器窗口交互的一些对象 ...　　BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差 1.2....有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。...案例：发送短信倒计时 点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信 案例分析 ① 按钮点击之后，会禁用 disabled 为true  ② 同时按钮里面的内容会变化， 注意 button...var time = 3; // 注册单击事件 btn.addEventListener('click', function() { // 禁用按钮

1.3K20

BOM

BOM的构成 BOM 比 DOM 更大，它包含 DOM。 ? 3. 顶级对象window window对象是浏览器的顶级对象，它具有双重角色。 它是JS访问浏览器窗口的一个接口。...注意: 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕, 再去执行处理函数。...window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。 如果使用addEventListener则没有限制 第2种 ?...案例分析： ①按钮点击之后，会禁用disabled为true ②同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改 ③里面秒数是有变化的，因此需要用到定时器 ④定义一个变量，...       var time = 3; // 注册单击事件        btn.addEventListener('click', function() {            // 禁用按钮

1.3K10

JSP 防止网页刷新重复提交数据

网页如何防止刷新重复提交与如何防止后退的解决方法 提交后禁用提交按钮（大部分人都是这样做的） 如果客户提交后,按F5刷新怎么办?...或者“怎样才能防止用户点击后退按钮返回以前浏览过的页面？” 遗憾的是，我们无法禁用浏览器的后退按钮。...遗憾的是，答案非常简单：我们无法禁用浏览器的后退按钮。         起先我对于居然有人想要禁用浏览器的后退按钮感到不可思议。...后来，看到竟然有那么多的人想要禁用这个后退按钮，我也就释然（想要禁用的只有后退按钮，不包括浏览器的前进按钮）。因为在默认情况下，用户提交表单之后可以通过后退按钮返回表单页面（而不是使用“编辑”按钮！）...它强制浏览器重新访问服务器下载页面，而不是从缓存读取页面。使用这种方法时，编程者的主要任务是创建一个会话级的变量，通过这个变量确定用户是否仍旧可以查看那个不适合通过后退按钮访问的页面。

11.5K20

JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

，使用 history对象可以将当前浏览器页面跳转到某个曾经打开过的页面 方法 描述 back() 后退一个页面，相当于浏览器后退按钮 forward() 前进一个页面，相对于浏览器前进按钮 go()...（80 或 443） protocol 属性 返回所使用的 Web 协议（http:// 或 https://） reload() 方法 重新加载当前页面，相对于浏览器的刷新按钮 assign() 方法...加载新的文档 示例：使用location对象中的属性和方法实现加载用户所选页面       window.onload = function...，在编写时可以不使用 window前缀 属性 描述 availWidth 返回显示屏幕的可用宽度（除 Windows 任务栏之外） availHeight 返回显示屏幕的可用高度（除 Windows 任务栏之外...对象 示例：使用navigator对象显示出浏览器安装了哪些插件   你的浏览器安装了以下插件：

75510

Js BOM

location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 （80 或 443） location.protocol 返回所使用的 web...console.log(getQueryVariable('b')); //2 Window History history.back() window.history.back()等于点击浏览器的后退按钮... history.forward() window.history.forward()等于点击浏览器的前进按钮，可以加载历史记录的下一个页面（前提是有下一个页面） <script type...expires：过期时间，默认为浏览器关闭时删除 设置cookie document.cookie="user=admin" 删除cookie只需要设置过期时间为过去的时间即可 ...一个页面只会执行一个onload事件，后面的会覆盖前面的 注意：由于html文档是自上而下执行的，而onload是文档加载完成才执行的，因此html文档里的onclick事件里执行的函数不能在onload

79200

如何制作自己的原生 JavaScript 路由

太糟糕了，因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API，就无法谈论路由。...history.back() 与 history.go(-1) 相同，或者当用户在浏览器中单击 Back 按钮时。你可以用任何一种方法达到相同的效果。...当用户按下浏览器的 Forward 按钮时，将执行 history.forward()，它等效于 history.go(1)”。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在，每次我们单击按钮时，URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...这取决于你的程序。可以是任何东西。 使“后退”和“前进”按钮起作用 通过使用 history.pushState，你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。

3.8K20

注意，这个 JavaScript 事件即将弃用！

一般我们会用于以下场景： 保存用户数据：离开页面前保存数据； 执行清理任务：在离开页面之前关闭打开的资源； 发送分析：在离开页面时发送与用户交互相关的数据。...另外，因为它是早于 bfcache （浏览器的前进，后退，缓存操作）的，所以会对正常的 bfcache 进行阻塞，对网站的性能产生负面影响（正常根据规范来讲，unload 是不应该阻止用户的 bfcache...console.log('页面不可见'); } }); 第二个替代事件为 pagehide ，它会在用户点击跳转其他链接、前进或后退按钮，或关闭浏览器选项卡时触发，也能够用来确定用户什么时候离开界面...pagehide 不会像 unload 一样让页面不符合bfcache （浏览器的前进，后退，缓存操作）的条件。...使用 Permissions-Policy 禁用 如果你知道自己的网站有用到这个事件，但是又不知道怎么移除，可以使用 Permissions-Policy 来进行限制，Chrome 115 版本专门增加了对

31020

BOM的介绍_BOM定义

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理， 比如：刷新浏览器、后退、前进、在浏览器中输入URL等。...编程练习 实现：当点击页面上的按钮时，弹出确认框 （1）当点击按钮上的确定时，打开设置了新特征的子窗口, 新窗口的特征参考任务栏中的描述 （2）当点击按钮上的取消时，关闭当前页面 思路 第一步：获取到按钮元素...，并为按钮绑定鼠标单击事件 下面的步骤皆在单击事件中进行 第二步：当点击按钮时，弹出确认框，用if判断对确认框返回的值进行判断 （1）返回的值为true时，说明点击的是确认，打开新的窗口“newPage.html...(timerId); null——释放内存 location对象 location对象是window对象下的一个属性，使用的时候可以省略window对象 location可以获取或者设置浏览器地址栏的...port:端口号 整数，可选，省略时使用方案的默认端口，如http的默认端口为80。 path:路径 由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

1.2K20

移动端H5页面开发坑点指南

(animation-play-state) H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state...-webkit-touch-callout:none; //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口 -webkit-user-select:none; //webkit浏览器 -...这种情况是以前遇到的,这里也说下;主要会发生在webview里多一点,当点击后退时页面以缓存形式出现,而不是刷新后的,很多情况下这不是你预期的效果,解决方法是用js: 方法1： window.addEventListener...页面通过历史记录和前进后退访问时。...:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏 -webkit-perspective: 1000; 解决active伪类失效 </body

3K10

手机端页面在项目中遇到的一些问题及解决办法

history.go(-1): 后退 + 刷新 history.back(): 后退 之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟 javascript：history.go...Chrome 和 ff 浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。...类似于 history.go(-1); 而 safari（包括桌面版和 ipad 版）的后退按钮则不会刷新页面，也不会提交数据申请。...下，使用伪元素改变表单元素默认外观 //1.禁用 select 默认箭头，::-ms-expand 修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰 select::-ms-expand {display...ms-check, input[type=checkbox]::-ms-check { display:none; } //3.禁用 pc 端表单输入框默认清除按钮，::-ms-clear 修改清除按钮

3.4K30

【前端路由】实现一个 hash、history 路由，改善页面渲染体验

通过hashchange事件监听URL变化，改变URL的方式： 通过浏览器前进后退改变URL 通过标签改变URL 通过window.locatioin改变URL history：提供pushState...和replaceState两个方法： 提供popstate事件，但popstate事件有些不同： 通过浏览器前进后退改变URL时会触发popstate事件 通过pushState/replaceState...或标签改变URL时不会触发popstate事件 可以通过拦截pushState/replaceState的调用和标签的点击事件来检测URL是否发生变化 实现方式(1)：hash ...() { routeView = document.querySelector('#routeView'); onPopState() //拦截a标签点击事件，点击时使用...> 我们看到，使用history的方式，需要多判断a标签点击事件并拦截。

19630

Web 性能优化-首屏和白屏时间

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。...如下图： 白屏时间 通常认为浏览器开始渲染 或者解析完 的时间是白屏结束的时间点。...我们只需要监听首屏内所有的图片的 onload 事件，获取图片 onload 时间最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。 <!...fetchStart: 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前。...Performance.navigation redirectCount: 0 // 页面经过了多少次重定向 type: 0 0 表示正常进入页面； 1 表示通过 window.location.reload() 刷新页面； 2 表示通过浏览器前进后退进入页面

2.4K20

SPA应用路由器如何工作？

那么，最关键的地方，就是如何设计路由器，如何让路由器工作？...当改变锚点时，页面的主体部分会切换内容，但是，整个页面不会被重新刷新。 那么，如何监听锚点变化？...HTML5 History API HTML5包含新对象history，其提供对浏览器历史记录的访问能力。它暴露一些常用方法和属性，可以让用户通过操作浏览器“前进”和“后退”按钮，访问到历史记录。...创建的历史条目） 浏览器支持情况如下： history.png 那么，如何利用history这些特性来创建路由器？...缺点是，切换路由后的http://www.somesite.com/subPage1.html 并不是一个真正的资源地址，想象一下，这个时候点击浏览器刷新按钮，浏览器必然会发起对subPage1.html

1.5K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券