DOM编程艺术学习（三）

JavaScript弹窗与最佳实践

最新推荐文章于 2025-05-05 14:32:57 发布

原创最新推荐文章于 2025-05-05 14:32:57 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

本文探讨了如何在JavaScript中创建弹出窗口的最佳实践，并强调了平稳退化和渐进增强的重要性。文中还介绍了如何利用window.open方法创建新窗口，并讨论了如何优化脚本加载以提高网页性能。

最佳实践

平稳退化：当访问者的浏览器不支持javaScript时仍然可以顺利地浏览你的网站，虽然某些功能无法使用，但最基本的操作可以顺利完成。

应该只在绝对必要的情况下使用弹出窗口，这涉及到网页的可访问性问题。因此，若网页上某个链接将弹出新窗口，应在链接本身的文字中予以说明。

创建新的窗口：

window.open(url,name,features);

三个参数是可选的：

url：指想在新窗口里打开的的网页的url地址。若省略这个参数，则是一个空白的浏览器窗口。

name：新窗口的名字，可以在代码里通过这个名字与新窗口通信。

features：是一个以逗号分隔的字符串，其内容是新窗口的各种属性。包括：尺寸、新窗口被启用或禁用的各种浏览功能（工具条、菜单条、初始显示位置等）。原则是新窗口的浏览功能要简而精。

function popUp(winURL){
	window.open(winURL,"popUp","width=320,heigh=480");
}

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

使用伪协议与return false的方法都很糟糕，不能实现平稳退化。

<a href="http://www.example.com" onclick="popUp('http://www.example.com');return false;">example</>
<pre name="code" class="html"><a href="http://www.example.com" onclick="popUp(this.getAttribute('href'));return false;">example</>
<pre name="code" class="html"><pre name="code" class="html"><a href="http://www.example.com" onclick="popUp(this.href);return false;">example</>

<pre name="code" class="html">将href属性设置为真实存在的URL地址，让它成为一个有效的链接，就可以为javaScript代码预留退路。还可以使用使用this来精简代码，它可以用来代表任何一种当前元素。

CSS最大的优点是，将Web文档的内容结构（标记）和版面设计（样式）分离。真正能从CSS技术获益的方法，是把样式全部转移到外部文件去。

渐进增强：用一些额外的信息层去包裹原始数据，按照渐进增强设计出的网页几乎都符合平稳退化原则。

应该把CSS代码从HTML文档里分离出来，放在一些外部文件里。再使用<link>标签调用这个文件。

class属性是样式与文档内容间的联结纽带。

再HTML文档里使用如onclick之类的属性既没有效率，也容易引发问题。应该讲JavaScriot代码调用行为与HTML文档的结构和内容分离开，使网页更健壮。

某些代码在存入外部JavaScript文件后将无法正常运行，例如：

var links=document.getElementByTagName("a");

这条语句会在JavaScript文件被加载时立即执行。因为脚本加载时文档可能不完全，所以模型也不完全，没有完整的DOM，getElementByTagName等方法就无法正常工作。所以必须让这些代码在HTML文档全部加载到浏览器后马上开始执行。

当HTML文档全部加载完毕时触发一个事件。window对象触发onload事件时，document对象已经存在。

对象检测

最简单的方法是，检测浏览器对JavaScript的支持程度，即，需要DOM脚本表达出，你必须理解这么多的JavaScript语言才能执行这些语句。

可以将某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true还是false来决定应该采取怎么样的星都。

function myFunction(){
  if(document.getElementById){
    statements using getElementById
  }
}

在使用对象检测时一定要删掉方法名后的括号，否则测试的方法的结果。使用对象检测，如果某个浏览器不支持这个方法，它就不会使用这个方法的语句。但是这个方法比较累赘。应该把思想从“如果你理解……就执行“变成”如果你不理解……就离开”。

if(!getElementById) return false;

<pre name="code" class="html">window.onload=prepareLinks;
function prepareLinks(){
if(!document.getElementByTagName) return false;
 var links=documents.getElementByTagName("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;
   }
  }
 }
}

这条语句可以确保“古老的”浏览器不会因为脚本代码而出现问题，可以让脚本有良好的向后兼容性。

浏览器嗅探：通过提取浏览器供应商提供的信息来解决向后兼容性。