开发者社区> 铁锚> 正文

完善用户体验: 活用window.location与window.open解决页面跳转问题

简介: 原文地址: JavaScript Redirects and window.open原文日期: 2014年08月27日翻译日期: 2014年08月31日翻译人员: 铁锚 (译者注: 本文解决的是按 Ctrl键时使用JS打开新页面的问题)在简化的HTML5规范中,允许在 A 标签内包含多个 DIV 和/或其他块级元素.
+关注继续查看
原文地址: JavaScript Redirects and window.open
原文日期: 2014年08月27日
翻译日期: 2014年08月31日
翻译人员: 铁锚


(译者注: 本文解决的是按 Ctrl键时使用JS打开新页面的问题)

在简化的HTML5规范中,允许在 A 标签内包含多个 DIV 和/或其他块级元素. 现在只要用 <a> 标签包住块元素,就能搞定原来需要用JavaScript来监听并调用 window.location 实现页面跳转(redirect)功能.
但使用<a>标签的这种包装形式也有不好使的情况 —— 例如,某个块元素(block)内还有一些 <a> 标签, 这种情况下我们只想在点击parent中<a>以外的其他部分时才跳转到一个给定的地址。

当然,像下面这样用一个简单的listener 也能实现我们的需求:

someElement.addEventListener('click', function(e) {
    // URL地址是什么都行,或者你也可以使用其他的代码来指定.
    // 此处用的是该元素的 `data-src` DOM属性(attribute)
    window.location = someElement.get('data-url');
});

…但这有时会有很糟的用户体验, 当按住CTRL键(Mac是COMMAND键),再用鼠标点击时,它会在同一个(标签页)窗口内打开链接。知道有这个问题,你肯定想到了该如何去解决.我们修改一小点代码就能达成这个目的,赶快花点时间去修复你的listener吧:

someElement.addEventListener('click', function(e) {
    // 获取URL
    var url = someElement.get('data-url');
    // 判断是否按下了CTRL键
    if(e.metaKey || e.ctrlKey || e.button === 1) {
        window.open(url);
    } else {
        window.location = url;
    }
});

原文作者已经在 http://davidwalsh.name/ 网站上实现了这个功能,在使用window.location进行页面重定向时你也应该记得这一点。这是一个很小的代码改进,但对可用性的提高却是非常重要的!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决移动端页面window.location.replace不生效的问题
解决移动端页面window.location.replace不生效的问题
475 0
前端面试题:1.页面加载完成(onload)之前触发的事件;2.History,Location,Window,Navigation的区别;3.e.target和e.currentTarget的区别
★Navagator:提供有关浏览器的信息 ★Window: Window对象处于对象层次的最顶层, 它提供了处理Navagator窗口的方法和属性 ★Location:提供了与当前打开的URL-工作的方 法和属性,是一个静态的对象 ★History:提供了与历史清单有关的信息 ★Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用
101 0
大型情感剧集Selenium:5_alert窗口与iframe框架定位
今天和大家说说alert与iframe框架早selenium定位中,存在的问题吧。
53 0
window.open被浏览器拦截终极解决方案
window.open被浏览器拦截终极解决方案
131 0
window.open 被浏览器拦截解决方案
对于ajax返回后在打开新窗口,可以在用户点击后就打开一个空白窗口,然后再返回成功后给空白窗口一个url,这样就不会被拦截了
220 0
重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互
原文:重新想象 Windows 8.1 Store Apps (80) - 控件增强: WebView 之基本应用, POST 数据, 与 JavaScript 交互 [源码下载] 重新想象 Windows 8.
899 0
Form_通过Zoom客制化跳转页面功能(案例)
2012-09-08 Created By BaoXinjian 一、摘要 Oracle Form Builder提供了提供了客制化custom.pll中zoom的功能,跳转页面的功能 编写Zoom Zoom允许用户调用在每一个块中调用逻辑,例如,你可能希望在输入采购订单form时打开供应商form,你可以在这一个块上使用Zoom并且当用户调用它,你可以打开供应商form 11i版本Zoom的行为: 1. Oracle 应用程序提供一个菜单项和工具栏中的一个按钮,用户可以调用Zoom,只有当这个块在CUSTOM库Zoom逻辑定义后,菜单项和按钮才可用。
773 0
+关注
铁锚
Java与数据库开发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于浏览器的实时构建探索之路--玄寂
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载