首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用onclick="location...“代替href。为什么我应该避免它和其他选项

使用onclick="location..."代替href是一种不推荐的做法,因为它存在一些问题和局限性。

  1. 可访问性问题:使用onclick="location..."会导致链接无法被屏幕阅读器等辅助技术正确解读,从而影响到视觉障碍用户的访问体验。
  2. SEO问题:搜索引擎爬虫通常无法正确解析通过onclick="location..."实现的链接,这可能会影响网页的搜索引擎优化效果。
  3. JavaScript依赖:onclick="location..."依赖于JavaScript的支持,如果用户的浏览器禁用了JavaScript,那么这种方式将无法正常工作。

相比之下,使用href属性来定义链接是更为常见和推荐的做法。它具有以下优势:

  1. 可访问性良好:使用href属性定义的链接可以被屏幕阅读器等辅助技术正确解读,从而提供更好的可访问性。
  2. SEO友好:搜索引擎爬虫可以正确解析href属性定义的链接,有助于网页的搜索引擎优化。
  3. 无JavaScript依赖:href属性定义的链接可以在没有JavaScript支持的浏览器中正常工作,提供更好的兼容性。

因此,除非特殊需求,一般情况下应该避免使用onclick="location..."代替href属性来定义链接。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

XSS绕过实战练习

level7 做了小写处理,将scripthref,src,on等字符串替换为空字符 ?...level8 做了小写处理,将scripthref,src,on等字符串加上下斜杠,使其无法正常解析,还将双引号实体编码,是我们不能闭合双引号 这里是一个a标签,用href构造一个链接 ?...发现src参数,查看源码发现把参数拼接到了最后一行输出,那这里应该是突破口了 这里估计使用ng-include,这个属性可以包含文件,默认是同域名的文件 ? ?...直接把arg02赋值为 onclick=alert(1) #注意最前面有一个空格 查看源码发现自动补全了引号,也不懂为啥 ? level18 与上一关一样的payload ?...过滤() 用``代替绕过 过滤空格 用%0a(换行符),%0d(回车符),/**/代替绕过 小写转大写情况下 字符ſ大写后为S(ſ不等于s) %00截断绕过 <a href=javascr%00ipt

3.5K10

从零开始学web安全(3)

href="location.href=\'http\u003a//www.baidu.com\'">test'; 这里用的是js编码中的第三种,js的unicode编码,其他用法一样。...先html编码先js编码看来也没啥区别,瞎逼编就好了。 重新理清下思路,其实举的这个例子非常特殊,不仅用到了三种编码,编码处理的环境也在不断变化。...解码 -> url跳转时候的url解码 看完这个解码顺序大家应该都了解为什么先html编码还是先js编码都可以了吧,并不是瞎逼编的= = 测试题目 ?...('test'); var hash = location.hash.substr(1); t.inner/*防过滤*/HTML = '<a href="#" id="test" onclick...结合html字符实体编码 + onclick里面的js可执行环境,是可以被xss的~ 其他选项题目就留给大家自己思考一下,就不一一解释了,应该并没有太大问题。 好吧,这篇就先到这里了~~

51920

从零开始学web安全(3)

href="location.href=\'http\u003a//www.baidu.com\'">test'; 这里用的是js编码中的第三种,js的unicode编码,其他用法一样。...先html编码先js编码看来也没啥区别,瞎逼编就好了。 重新理清下思路,其实举的这个例子非常特殊,不仅用到了三种编码,编码处理的环境也在不断变化。...解码 -> url跳转时候的url解码 看完这个解码顺序大家应该都了解为什么先html编码还是先js编码都可以了吧,并不是瞎逼编的= = 测试题目 ?...('test'); var hash = location.hash.substr(1); t.inner/*防过滤*/HTML = '<a href="#" id="test" onclick...结合html字符实体编码 + onclick里面的js可执行环境,是可以被xss的~ 其他选项题目就留给大家自己思考一下,就不一一解释了,应该并没有太大问题。

847100

EasyUI学习笔记

按钮组件使用超链接按钮创建。使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态折叠/展开以适应的文本标签。...使用$.fn.window.defaults重写默认值对象。 窗口控件是一个浮动可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小关闭。..." onclick="javascript:alert('add')"> <a href="#" class="icon-edit" onclick="javascript:alert(...) 依赖panle linkbutton 使用$.fn.tabs.defaults重写默认值对象。...选项卡显示一批面板。但在同一个时间只会显示一个面板。 每个选项卡面板都有头标题一些小的按钮工具菜单, 包括关闭按钮其他自定义按钮。 <!

10.3K30

一个连衣服都穿不整齐的人,代码也肯定写不整齐。

今天大家讨论的话题就是关于代码缩进的问题,再说之前,想先给大家看两段代码:   代码片段一: <div id="header...,<em>它</em>虽然只是第五部预告片里的背景歌曲,但真的很好听,建议大家听听。...歌曲名:《be thou my vision》,演唱者:Corrinne May,也有<em>其他</em>人的翻唱版本,不过<em>我</em>还是喜欢原版。...歌曲名:《be thou my vision》,演唱者:Corrinne May,也有<em>其他</em>人的翻唱版本,不过<em>我</em>还是喜欢原版。...但有人会反驳,说tab在不同IDE下长度显示不一,其实这个在实际开发中可以尽量<em>避免</em>,如果公司不是很大,开发人员不是很多的时候,IDE完全可以统一,同时也<em>避免</em>了个人英雄主义的出现。

19020

【React】945- 你真的用对 useEffect 了吗?

在这个 effect 中,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。 为什么在组件内部调用 useEffect?...将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量(或其他 props)。我们不需要特殊的 API 来读取 —— 已经保存在函数作用域中。...的思路是,先设置这个接口的返回值为data=[], 等到数据是再去请求另一个接口,即data作为useEffect的第二个参数传入。 但是不知道为什么会造成死循环,拿不到我们想要的结果。...知道useEffect会比较前一次渲染后一次渲染的值,然后就在想,如果所设置的data=[],那么即使后一次渲染的data也为[],那么[]===[]为false,所以才会造成useEffect...next —— 指向下一个定义在函数组件中的 effect 节点 除了 tag 属性,其他的属性都很简明易懂。

9.6K20

Vue组件的Prop命名约定

例如,使用小驼峰命名法(isEnabled)并保持名称简短(不超过30个字符)。 然而,Vue有自己的一套最佳实践,我们应该遵循。让我们根据我在使用Vue的经验谈谈一些技巧。...使用前缀如 hasCancelButton 或 hasHeader 来表示特定的UI元素是否存在或可见。 2. 描述性命名 Props 应该描述组件本身,侧重于的功能而不是为什么要这样做。...使用 代替 选择 isLoadingComments 而不是 areCommentsLoading...如果目标是为了为图标创建更多的空间而不是切换其存在,考虑使用 isSpacious 而不是 hasIcon 。记住, hasIcon 回答的是为什么,而不是什么。 3.... 避免在自定义事件中使用内置的事件处理程序属性名称。

23530

浅谈React性能优化的方向

主要讨论 React 性能优化的主要方向一些小技巧。如果你觉得可以,请多点赞,鼓励写出更精彩的文章?。...有很多种方式来代替高阶组件/RenderProps,例如优先使用 props、React Hooks 2️⃣ 虚拟列表 虚拟列表是常见的‘长列表’’复杂组件树’优化方式,优化的本质就是减少渲染的节点...(i.id)} value={i.value} /> ))} 上面的 onClick 是一个糟糕的实现,没有携带任何信息来标识事件来源,所以这里只能使用闭包形式,更好的设计可能是这样的...3️⃣ 简化 state 不是所有状态都应该放在组件的 state 中. 例如缓存数据。按照的原则是:如果需要组件响应的变动, 或者需要渲染到视图中的数据才应该放到 state 中。...精细化渲染 所谓精细化渲染指的是只有一个数据来源导致组件重新渲染, 比如说 A 只依赖于 a 数据,那么只有在 a 数据变动时才渲染 A, 其他状态变化不应该影响组件 A。

1.6K30

vue的两种路由模式

为什么在开发环境下,使用history模式的时候刷新都不报错,而打包成静态文件上线后,打开项目空白页面(这个大多数是在配置文件配置:publicPath: '....因为打包成静态文件上线后,这个项目就只是一个静态文件,只是被你的nginx或其他代理服务器给托管起来了,在这个项目里进行F5刷新,还是会等于请求url,如果匹配不到相应的路径就还是会报404 而在开发环境下...,是有一个服务(8080端口)托管起来的,个人猜测应该是vue脚手架应该做了很多处理,比如刷新的时候匹配不到路径就跳转/,所以在开发环境下是不会报404的。...="goNotFount()">404 使用history其他方法改变url,不会发起网络请求...onClick="goNotFount()">404 使用history其他方法改变url,不会发起网络请求</h1

2.1K10

瞒不住了,Prefetch 就是一个大谎言

根据 bundle 的大小网络的速度,这可能会引入一个显著的、明显的延迟。那我们能做些什么来改善呢? Prefetch 幸运的是,浏览器自带 Prefetch 支持!...那 prefetch 为什么不能如你所愿呢? 原因主要由几点: Modulepreload 不能在大多数浏览器中使用。...Firefox 有 network.dns.disablePrefetchFromHTTPS 选项,默认设置为 true。...来自 Console 的警告 最后,如果某些浏览器检测到给定的预取资源在 x 秒内未被使用,则会发出控制台警告。因为浏览器会认为,你没有使用,就不应该预取。...该怎么做 觉得真正的 prefetch 是一种提示,告诉浏览器你将需要一些东西,因此浏览器应该在下载时有一个良好的开端,但我们想要的是用 用户可能需要的交互代码预填充缓存。

30420

瞒不住了,Prefetch 就是一个大谎言

根据 bundle 的大小网络的速度,这可能会引入一个显著的、明显的延迟。那我们能做些什么来改善呢?Prefetch幸运的是,浏览器自带 Prefetch 支持!所以你会把这样的东西放到头部部分。...那 prefetch 为什么不能如你所愿呢? 原因主要由几点:Modulepreload 不能在大多数浏览器中使用。...Firefox 有 network.dns.disablePrefetchFromHTTPS 选项,默认设置为 true。...来自 Console 的警告最后,如果某些浏览器检测到给定的预取资源在 x 秒内未被使用,则会发出控制台警告。因为浏览器会认为,你没有使用,就不应该预取。...图片该怎么做觉得真正的 prefetch 是一种提示,告诉浏览器你将需要一些东西,因此浏览器应该在下载时有一个良好的开端,但我们想要的是用 用户可能需要的交互代码预填充缓存。

66700

编写高性能HTML网页应用

="/contact">Contact   应该使用小写 Home   大小写混合看上去更恶心 Pesto  语义标记   “...>   使用写正文   使用 代替 表示强调   表单使用元素,input 类型   混合文字元素会导至布局的问题 Name...使用元素代表文本,而不是用来布局。   避免使用来换行,使用块级元素CSS来代替。   避免使用水平分隔线。使用CSS的border样式来控制。   不要使用不必要的DIV。...使用CSS的paddingmargin,理解盒子模型。  CSS   这篇文章是关于HTML的,但是这里有一些基本的CSS小贴士。   避免内嵌的CSS。...  提供向后兼容   在链接上添加title属性,而且应该避免与link文本出现相同的内容   在输入元素上添加typeplaceholder属性   原文地址: samdutton.wordpress.com

2K40

6个编写优质干净代码的技巧

的确,编写保持干净的代码并不意味着应该忽略任何改进的机会,认为应该始终对目前的做法保持可改进的态度,并努力寻找改进的机会。...问题可能不是代码很难理解或使用,相反,其他人可能不理解为什么要实现这个函数或方法,或者为什么要以特定的方式创建。意思是,创建函数或方法的意图还不清楚。...所以,通过代码注释可以帮助解决这个问题,也可以帮助我们向其他人解释为什么写了这个方法,为什么要用这种特定的方式来写,那么其他人就不必猜测这些方法或函数的用途了。...我们应该定期检查代码,并试着改进。否则,如果不审查更新我们的旧代码,很快就会过时,就像我们的设备一样。如果想让代码保持最佳状态,就需要定期更新它们。 对于每天使用的代码,情况也是如此。...代码会变得更加复杂混乱,所有应该避免这种情况发生,并保持代码干净。实现这一点的唯一方法是定期检查我们的代码。换句话说,我们需要保持

701100

浅谈 React 组件设计

在 jQuery 还大行其道的时代,我们在网上可以到处一些 jQuery 插件,里面有各种丰富的插件,比如轮播图、表单、选项卡等等。 组件?插件? 组件插件的区别是什么呢?...而组件则是偏向于 ui 层面的,将 ui 业务逻辑封装起来,供其他使用。...但这种插件的好处在于可以由使用者自定义具体的 DOM 结构样式。...组件之间没有彼此依赖,一个组件的改动不会影响到其他组件,这种叫做松耦合。 很明显,我们在开发中应当使用松耦合的方式来设计组件,这样不仅提供了复用性,还方便了测试。...在设计一个组件的时候,很多人往往会陷入一种怪圈,那就是该怎么才能封装更多功能?怎么才能兼容不同的渲染? 这时候我们就不妨换一种思路,如果将渲染交给使用者来控制呢?

1.1K10

Apriso 开发葵花宝典之五 Process Builder JavaScript 篇

因此,当你多次使用一个全局变量时,你应该在本地重新定义,如: var doc = document, blah = doc.getElementById('myID'), blah2 = doc.getElementById...,多次引用对象属性或数组项时,都可以通过定义变量来提高性能,可以使用{}代替New Object(),Use [] 代替New Array(),如 var o = {}; var a = ['Joe',...while循环来减少其中一个操作,如: var x = 9; do { } while( x-- ); DOM操作可能会影响性能;你要尽可能避免操纵, JQuery在1.4版中引入了detach()来帮助解决这个问题...,允许您在使用一个元素时从DOM中删除。...var声明初始化变量 在语句外面声明变量 通过将全局占用空间减少到单个名称,可以显著减少与其他应用程序、小部件或库进行不良交互的可能性。

52050
领券