"javascript:" 伪协议与平稳退化

Posted 2020-11-12 欢迎

"javascript:"伪协议是一种非标准化协议，其可以让我们通过一个链接调用javascript 函数。例如：<a href="javascript:pop(‘http://www.xxx‘);">Example</a>

但是这样也有一些问题，那就是这种形式在支持伪协议的浏览器中可以使用，但是老旧的浏览器则会尝试打开这个链接并且报错。

同时随着一些用户操作‘禁用javascript’（不得不说，部分用户会禁用js以阻止一些网页弹窗，而一些浏览器可能也会有默认禁用），也会让这样的形式失效，这样会很影响到用户体验与页面的功能与性能。

所以页面中对这样的方式应该尽量少用。但是如果不用这样的方式，我们该用哪样呢？

这时我们可能会想到使用onclick事件，实现，比如：<a href="#" onclick="pop(‘http//:www.xxx‘);">Example</a>，这样也能够实现这个函数，但是如果用户禁用javascript功能的话，这样的方式依旧失败。

依旧可能会会使页面功能缺失。这个时候，考虑到javascript的“平稳退化”就很重要了。“平稳退化”的想法，就是防止当页面的js无法实现火使用时，如何保证用户依旧能够

愉快的浏览页面，完成操作。

 而针对以上问题，实现“平稳退化”的操作就可以设置为：<a href="http//:www.xxx" onclick="pop(‘http//:www.xxx‘);">Example</a>,我们可以将href换成真实链接，同时而设置js函数，确保用户

在js失效的情况下，也能够尝试的成功打开这个链接，从而保证功能的实现。当然这样一个长长的代码不是我们喜欢的，所以我们也可以尝试写成<a href="http//:www.xxx" onclick="pop(this.href);">Exampel</a>，采用

DOM的this.href属性代替链接。看似代码没用改变多少，甚至当我第一次看到这这样的设计方式的时候，我的内心也吐槽到：(ˉ▽￣～) ~~，，这不就是同时完成两个功能操作么，一个行不通，用另一个花好了，

没什么大不了的，但是这样的想法，随之而来被打破，因为自己似乎一直以来并没有考虑到为了平稳退化而进行这样的代码设计，ε=(′ο｀*)))唉。果然自己还是 太年轻。

本节完。

 

如果您有别的方法，欢迎━(*｀?′*)ノ亻!留言讨论。谢谢！！！