平稳退化
- 如果正确使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持的情况下仍能顺利地浏览你的网站。
- 如果网页上的某个链接将弹出新窗口,最后在这个链接本身的文字中予以说明。
- Javascript使用window对象的open()方法创建新的浏览器窗口,这个方法有三个可选参数:window.open(url, name, features)
(1)url:在新窗口里打开的网页的URL地址,如果省略,屏幕上将弹出一个空白的浏览器窗口。
(2)name:新窗口的名字,可以在代码里通过这个名字与新窗口进行通信。
(3)features:以逗号分隔的字符串,其内容是新窗口的各种属性。这些属性包括新窗口的尺寸(宽度和高度)以及新窗口被启用或禁用的各种浏览功能(工具条、菜单条、初始显示位置,等等)。对于这个参数应该遵循以下原则:新窗口的浏览功能要少而精。
(4)open()方法对文档的内容无影响,只与浏览环境有关。
function popUp(winUrl) {
window.open(winUrl, "popup", "width = 320, hight = 480");
}
- "javascript:"伪协议,通过一个链接来调用JavaScript函数(支持这种伪协议但禁用了JavaScript功能的浏览器会什么也不做)
<a href = "javascript:popUp('http://www.example.com/');">Example</a>
- 内嵌的事件处理函数
<a href = "#" onclick = "popUp('http://www.example.com/');return false;">Example</a> // href属性值设置为"#"是为了创建6一个空链接,实际工作全部由onclick负责完成(如果用户禁用了JavaScript功能,这样的链接将毫无用户)
- href属性值设置为真实的url
Example
分离JavaScript
- 可以用getElementById把一个事件添加到某个特定id属性的元素上,getElementById(id).event = action
- 如果涉及到多个元素,可以用getElementByTagName 和getAttribute把事件添加到有特定属性的一组元素上
window.onload = prepareLinks;
function prepareLinks() {
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
if(links[i].getAttribute("class") == "popup"){
links[i].onclick = function () {
popUp(this.getAttribute("href"));
return false
}
}
}
}
function popUp(winUrl) {
window.open(winUrl, "popup", "width=320, height=480");
}
向后兼容
- 对象检测,只要把某个方法打包在一个if语句里,就可以根据这条if语句的条件表达式的求值结果时true还是false来决定应该采取怎样的行动。
window.onload = function () {
if(!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
if(links[i].getAttribute("class") == "popup"){
links[i].onclick = function () {
popUp(this.getAttribute("href"));
return false
}
}
}
}
性能考虑
- 尽量少访问DOM和尽量减少标记
- 合并和放置脚本
- 压缩脚本,把脚本文件中不必要的字节删除,如空格和注释