平稳退化 渐进增强

时间:2022-06-15 21:41:08

一 平稳退化

我们要知道,网站的访问者完全有可能使用的是不支持JavaScript的浏览器,还有一种可能就是浏览器支持,但是用户可能因为不想看到弹出广告而禁用了JavaScript,所以,我们应该考虑,面对这些用户的时候要怎样解决他们浏览的问题。

如果能正确使用JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利浏览网站,这就是所谓的平稳退化,从而可以保证基本操作的完成。

来看一个新窗口里打开链接的例子,JavaScript使用window对象的open()方法来创建新的浏览器窗口,

window.open(url,name,features)

第一个参数指想在新窗口里打开的网页的url地址

第二个参数是新窗口的名字

第三个参数是以一个逗号分隔的字符串内容是新窗口的各种属性

比如这样定义:

function popup(winURL){

window.open(winURL,"popup","width=320,height=80");

}

把这个函数放入一个外部文件,当需要使用时,只要在HTML文档开头加一个script标签导入即可。

调用popup函数的一个方法是使用伪协议;

"javascript:"伪协议让我们通过一个链接来调用JavaScript函数,比如调用popup函数如下:

<a href="javascript:popup('http://www.example.com/');">Example</a>

这个在支持这个伪协议的浏览器中运行正常,其他情况还是打不开。

我们需要解决这个问题,因为即使不支持JavaScript的浏览器很少,但是我们可以想象一下,如果这个用户是一个搜索机器人,搜索机器人是一个自动化程序,他们浏览web的目的是为了把各种网页添加到搜索引擎的数据库里。然而,只有极少数搜索机器人能够理解JavaScript代码,所以,如果不能做到平稳退化,那么它们在搜索引擎排名上会受到极大损害。

具体到popup函数,为JavaScript留出退路很简单:把href属性设置为真实存在的URL地址,让它成为一个有效链接,如下

<a href="http://www.example.com/"   onClick="popup('http://www.example.com/');">Example</a>

这样即使JavaScript被禁用,这个链接也是可用的

二  渐进增强

所谓渐进增强就是用一些额外的信息层去包裹原始数据,按照渐进增强原则创建出来的网页几乎都符合平稳退化的原则。

其实就是把CSS代码从HTML文档中分离出来放在一些外部文件中,这样更容易阅读和理解,而且样式信息也容易更改。