首页 > web前端 > js教程 > 正文

JavaScript中关于平稳退化graceful degradation的简单介绍

黄舟
发布: 2017-07-24 15:55:20
原创
1552人浏览过

所谓平稳退化,就是指可以让访问者在浏览器不支持javascript或者禁用了javascript的时候依旧可以顺利的浏览你的网页,下文给大家简单介绍了js中的平稳退化,感兴趣的朋友一起看看吧

所谓平稳退化,就是指可以让访问者在浏览器不支持javascript或者禁用了JavaScript的时候依旧可以顺利的浏览你的网页;即,虽然有些功能无法使用,但基本操作依旧可以顺利完成。

这里用在新窗口打开一个链接作为例子,我们知道js打开新窗口的方法:


window.open(url,name,features)
登录后复制

在这里,url是要打开的网页的url地址,name是新窗口的名字,最后的features是一系列的参数

好,现在写一个简单的函数:

立即学习Java免费学习笔记(深入)”;


function openwindow(winUrl){ 
window.open(winUrl,"new window","width = 320 , height = 480") 
}
登录后复制

然后可以使用伪协议调用该函数:


<a href = "javascript:openwindow('http://www.google.com');">google</a>
登录后复制

这样的做法,可以在支持“JavaScript:”伪协议的浏览器里正常运行,不支持JavaScript的浏览器会尝试打开链接但失败,而在禁用了JavaScript功能的浏览器里什么都不会做;

另一种做法是使用onclick:


<a href = "#" onclick = "openwindow('http://www.google.com');return false;">google</a>
登录后复制

在这里"#"代表着一个空链接,加入了return false之后,<a>标签不会跳转到href指定的链接,在这里实际工作都在onclick里执行。但是这样做在禁用了JavaScript功能的浏览器里依旧无法打开。

UP简历
UP简历

基于AI技术的免费在线简历制作工具

UP简历 128
查看详情 UP简历

那么怎样可以解决这个问题呢,其实只需要:


<a href = "http://www.google.com" onclick = "openwindow(http://www.google.com);return false;">google</a>
登录后复制

或者:


<a href = "http://www.google.com" onclick = "openwindow(this.href);return false;">google</a>
登录后复制

我们使用onclick去执行JavaScript的函数,但是在href属性里也确实填写了url,这样,如果是在禁用了JavaScript 的浏览器里,虽然不能打开一个新窗口,在新窗口里打开连接,但是至少是可以跳转到目标网页的(当前页面);

最后说一下为什么要使用平稳退化,可能会有这样的想法:让那些禁用了或者不支持JavaScript的浏览器顺利访问你的网站有那么重要吗,毕竟现在使用不支持JavaScript或者总是禁用JavaScript功能的用户应该是已经非常少的了。

确实这样的用户已经非常少了,但是它很重要;

这个用户可能是一个搜索机器人——一种自动化程序,他们浏览各个网页的目的只是为了加入到搜索引擎的数据库里,各大搜索引擎都有类似的程序,但是大多数的搜索机器人无法理解JavaScript代码,所以如果你的网页无法平稳退化,会很大程度上打击其在搜索引擎上的排名。

总结

以上就是JavaScript中关于平稳退化graceful degradation的简单介绍的详细内容,更多请关注php中文网其它相关文章!

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号