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

"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属性代替链接。看似代码没用改变多少,甚至当我第一次看到这这样的设计方式的时候,我的内心也吐槽到:(ˉ▽ ̄~) ~~,,这不就是同时完成两个功能操作么,一个行不通,用另一个花好了,

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

本节完。

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

原文地址:https://www.cnblogs.com/wxhhts/p/9153018.html

时间: 2024-10-06 16:18:33

"javascript:" 伪协议与平稳退化的相关文章

JavaScript伪协议

[javascript 伪协议] 将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行.如果javascript:URL中的javascript代码含有多个语句,必须使用分号将这些语句分隔开.这样的URL如下所示: 1 javascript:var now = new Date(); "<h1>The time is:</

filter_var 函数()使用javascript伪协议绕过执行xss

escape 过滤器来过滤link,而实际上这里的 escape 过滤器,是用PHP内置函数 htmlspecialchars 来实现的 htmlspecialchars 函数定义如下: htmlspecialchars:(PHP 4, PHP 5, PHP 7) 功能 :将特殊字符转换为 HTML 实体 定义 :string htmlspecialchars ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string$

JavaScrtip之平稳退化(在浏览器不支持JS或者JS失效的情况下用户仍能顺利的浏览你的网站,可能有些功能无法使用,但是最基本的操作仍能顺利完成)

这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来创建新的浏览器窗口; window.open(url,name,features); 这个方法有三个参数: url:新窗口里打开的网页的url地址.如果省略这个参数(这个参数为空),屏幕上将弹出一个空白的浏览器窗口. name:新窗口的名字. featrues:这个参数是以逗号分隔的一个字符串,他的内容是新窗口的各种属性,如新窗口的宽,高,以及新窗口被启用或禁用的各种浏览器

平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript图片库</title> 6 <script type="text/javascript"> 7 <!--平稳退化,JS和HTML标记分离,极致性能的JS图片库--> 8 fu

【JavaScript】javascript中伪协议(javascript:)使用探讨

javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javascript:void(0)">No response link</a> 将javascript代码添加到客户端的方法是把它放置在伪协议说明符号 javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运

JavaScript中伪协议 javascript:研究

将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行.如果javascript:URL中的javascript代码含有多个语句,必须使用分号将这些语句分隔开.这样的URL如下所示: javascript:var now = new Date(); "<h1>The time is:</h1>" + now;

性能、JavaScript与html标签分离、平稳退化

性能 尽量减少DOM访问和标记,减少document.getElementsByTagName()之类方法的使用,把这类方法返回的值存储在变量之中. 合并脚本.样式文件.图片文件等,一遍减少加载页面时的请求数量. 压缩脚本. JavaScript与html标签分离 当我们添加动作时,会有个第一反应: <div id="div1" onclick="doSomething(this)">Click here</div> //这边是JavaScr

平稳退化 前端

window.open()第一个参数为要链接到的url,第二个参数是新窗口的名字,可以在代码里通过这个名字与新窗口进行通信. function popUp(url){ window.open(url,"popup","width=320,height=460") } 要想创建新的浏览器窗口,可使用伪元素JavaScript:,如下所示 <a href="javascript:popUp('http://www.example.com/')"

javascritp伪协议

[javascritp伪协议] 将javascript代码添加到客户端的方法是把它放置在伪协议说明符javascript:后的URL中.这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行.如果javascript:URL中的javascript代码含有多个语句,必须使用分号将这些语句分隔开.这样的URL如下所示: 1 javascript:var now = new Date(); "<h1>The time is:</h