美文网首页
a标签的跳转问题

a标签的跳转问题

作者: Sune小叶子 | 来源:发表于2019-03-07 14:27 被阅读0次
<a href="#"></a>
<a href="javascript:void(0);"></a>
//a.js
window.open("https://....com", "_blank", "height=560,width=550, top=140,left=200");

在js中采用window.open打开一个新的页面的时候,如果在a标签中采用'#'的写法,会导致当前页面出现404的情况;而如果采用第二种写法"javascript:void(0);"就不会出现404的现象
为什么会这样子,网上查阅了一下资料,对于a标签有这些不同场景的使用结果

 <a href="#"></a>

 <a href="#id"></a>

 <a href="##"></a>

 <a href="javascript:void(0);"></a>

<a href="javascript:;"></a>

<a href="#"></a>点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件
<a href="#id"></a>点击这个链接后,锚点机制会作用,页面贴齐页面里面有id为id的元素上缘
<a href="##"></a>这种我不怎么用,但是看见网上有说#####以及###的区别的,你们可以百度一下
<a href="javascript:;"></a>``<a href="javascript:void(0);"></a>这两种都使用了JavaScript的伪协议,这里会涉及到IE6的一个兼容问题<a href="javascript:void(0);"></a>这种方式触发的在IE6会使得页面中的gif暂停,并且触发onbeforeunload事件,IE6认作这个页面有了重定向,并abort之后所有的请求。所以假如你在此之后替换了一个<img>的src,IE6完全不会完成这个新的请求。

哎呀说这么多,感觉好啰嗦,总的来说:在IE11和chrome中,点击所有的<a>都会造成地址栏的修改,并触发hashchange事件。
那我们最好就是写的时候就在href属性里面写上真实的网址,并取消 <a> 的默认点击事件,return false 或event.preventDefault

本文参考https://www.cnblogs.com/pp-cat/p/4308736.html

相关文章

  • a标签的跳转问题

    在js中采用window.open打开一个新的页面的时候,如果在a标签中采用'#'的写法,会导致当前页面出现404...

  • 阻止a标签跳转的各种解决方案

    当把a标签作为按钮来用时,会有一个问题:a标签被点击时,会发生跳转;为解决此问题,我特意研究的a标签的跳转行为,总...

  • react 路由 2

    一.路由的跳转 1.标签跳转 在需要跳转的地方使用Link标签进行跳转 注意:记得引入 import {Link}...

  • HTML常用标签

    I:a标签的用法 a标签的作用: 1、跳转外部页面 2、跳转内部锚点 3、跳转电话、邮箱等功能 a标签常用到的属性...

  • Vue中遇到的一些问题及总结

    vue中使用a标签href跳转某个地方 router跳转拼接参数问题 vue-cli引入全局css和局部js方法

  • html

    Tag : 1. 百度 标签跳转到网页 2. 主页 标签跳转到本地 3. 本页面位置1 标签跳转到当前...

  • html-图片/表格/表单

    a标签的认识 ’#‘号跳转页面内锚点跳转外部网页跳转内部网页 a标签的伪协议 img的认识 img是一个单标签 ...

  • vue 页面跳转的两种方式

    1,标签跳转 2,点击事件跳转

  • 微信网页a链接跳转失效

    问题 最近常碰到这个问题就是 在微信端点击a标签链接的时候,第一次正常界面跳转。但是,界面重新跳转回来再次点击a标...

  • 2021-02-22nuxt.js服务端渲染中如何实现路由的跳转

    一、nuxt.js 路由跳转 1、nuxt-link标签跳转 在html标签内使用nuxt-link跳转,相应于超...

网友评论

      本文标题:a标签的跳转问题

      本文链接:https://www.haomeiwen.com/subject/fmyouqtx.html