平稳退化 前端

window.open()第一个参数为要链接到的url,第二个参数是新窗口的名字,可以在代码里通过这个名字与新窗口进行通信。
function popUp(url){
    window.open(url,"popup","width=320,height=460")
}

要想创建新的浏览器窗口,可使用伪元素JavaScript:,如下所示

<a href="javascript:popUp(‘http://www.example.com/‘)">Example</a>

调用只在支持伪元素的浏览器中有效,因此不推荐

替代性方案如下

<a href="#" onclick="popUp(‘http://www.example.com/‘);return false;">Example</a>

但是如果用户禁用了JavaScript,这种做法也毫无用处

平稳退化

<a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example</a>或者
<a href="http://www.example.com/" onclick="popUp(this.getAttribute("href");return false;">Example</a>

这样即使禁用了js,依然能实现相应的功能

时间: 2024-10-12 09:00:42

平稳退化 前端的相关文章

平稳退化,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

链接的平稳退化、渐进增强和向后兼容

1.平稳退化<a href="http://www.baidu.com/" title="A fengxz" onclick="popPup(this.getAttribute("href"));return false;">fengxz</a>//HTML function popPup(winURL){    window.open(winURL);        }//JavaScript 即使J

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

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

&quot;javascript:&quot; 伪协议与平稳退化

"javascript:"伪协议是一种非标准化协议,其可以让我们通过一个链接调用javascript 函数.例如:<a href="javascript:pop('http://www.xxx');">Example</a> 但是这样也有一些问题,那就是这种形式在支持伪协议的浏览器中可以使用,但是老旧的浏览器则会尝试打开这个链接并且报错. 同时随着一些用户操作'禁用javascript'(不得不说,部分用户会禁用js以阻止一些网页弹窗,而一些

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

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

转载 前端基础知识体系 一个新手的学习之路

原帖地址:  转载的原因是我学习前端和php已经4个多月了.看看自己还有那些不足.自己得努力学习,牛人太多.红色是我会的,或者学过的.希望今天把大部分飘红. 一.HTML 标签的分类 标签表示一个元素 按性质划分: Block-Level和Inline-Level 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatting: em, strong, sub, del, ins, small Lists: ul, li

前端知识体系及修炼

前端开发的核心是HTML + CSS + JavaScript.本质上它们构成一个MVC框架,即HTML作为信息模型(Model),CSS控制样式(View),JavaScript负责调度数据和实现某种展现逻辑(Controller). HTML 1. 标签的分类 1. 标签表示一个元素 2. 按性质划分: Block-Level和Inline-Level 3. 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatti

前端技术开发的一些建议

这个是一位腾讯前端工程师写的意见 原文 http://www.vinqon.com/codeblog/?detail/11101 给前端同学的一些建议 学习建议以前经常交流,网上也很多,说得太多就会变得太虚了.我随便想了几点,没有什么逻辑线索,大家可以参考一下. 1).开一个技术博客 可以通过博客写学习笔记,积累技术经验,记录学习过程: 可以展示你自己的成果.而且有时候面试有一种情况,有很多问题不是你不会答,只是没有酝酿过.想过一遍写过一遍之后表达会流畅很多: 有精力的可以自己写一个Blog程序

前端知识体系及修炼攻略

Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来. 早期的前端其实就是Table布局,后来发展到所谓的Div + CSS网站重构,再到现在的让人眼花缭乱的各种各样的新技术,Web前端技术发展是非常快速的,因此选择了前端这个行业就意味着不停的学习吧.让我们先看看张克军绘制