才子小窝 - Web编程http://www.54caizi.org/天生我才必有用，千金散尽还复来 - RainbowSoft Studio Z-Blog 1.8 Spirit Build 80605zh-CNCopyright 2008-? 才子小窝. Some Rights Reserved. 粤ICP备08040021号  网站地图Thu, 09 Sep 2010 07:13:48 +0800Firefox把caption元素挤出table家庭a@b.com (风流才子)http://www.54caizi.org/post/firefox-is-different-for-caption.htmlFri, 08 Aug 2008 14:36:16 +0800http://www.54caizi.org/post/firefox-is-different-for-caption.html关于table如何通过XHTML验证那档子事”，最后贴出了一段才子自用的table样式的定义，有网友今天告诉我，他发现定义了table的margin之后，也就是定义了table的外边距之后，在Firefox下的渲染效果与其它各大主流浏览器都不同，caption这个标签元素是表格的说明，却被挤出了table之外，变成caption与表格内容之间的边距是定义的margin的值了。
这就奇怪了，caption与thead，tbody，tfoot都是table下同等级的元素，为什么Firefox却把caption元素挤出了table家庭呢？真有点匪夷所思。
才子用其它的一些浏览器都测试过了，唯独只有Firefox的渲染效果不同，看来Firefox这个被大家所公认的所谓优秀的Web标准浏览器，似乎也有不标准的地方，呵呵。
PS：才子一直都觉得Firefox就是个垃圾。

特意做个演示页面，请大家用各种不同的浏览器浏览一下，看看渲染效果的差异！
定义了表格宽度为100%，也只有Firefox把左边的表格线也弄没了，原因不明。
演示：http://www.54caizi.org/demo/firefox-is-different-for-caption.html

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/firefox-is-different-for-caption.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=53http://www.54caizi.org/cmd.asp?act=tb&id=53&key=82cfba9a定义列表+CSS制作的垂直菜单a@b.com (风流才子)http://www.54caizi.org/post/dl-menu.htmlThu, 07 Aug 2008 01:39:45 +0800http://www.54caizi.org/post/dl-menu.html今天找到一个用定义列表(dl,dt,dd)+css制作的垂直菜单，还不错，有一定的参考价值，收藏一下。
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="gb2312" />
<title>dl,dt,dd制作的CSS垂直菜单</title>
<style type="text/css">
body {
  font-size: 12px;
  margin: 0;
}
#menu dl {
  margin: 0 auto;
  padding: 0 0 10px 0;
  width: 150px;
  background: #69c;
}
#menu dt {
  margin: 0;
  padding: 10px;
  background: #69c;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
#menu dd {
  margin: 0;
  padding: 0;
  background: #47a;
  color: #fff;
  font-size: 1em;
  border-bottom:1px solid #fff;
}
#gallery a, #gallery a:visited {
  display:block;
  padding:5px 5px 5px 20px;
  width:125px;
  background: #47a;
  color:#fff;
  text-decoration:none;
}
#gallery a:hover {
  background: #258;
  color:#9cf;
}
</style>
</head>

<body>
<div id="menu">
  <dl id="gallery">
    <dt>Gallery</dt>
    <dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>
    <dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>
    <dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>
    <dd><a href="#" title="William Turner">William Turner</a></dd>
    <dd><a href="#" title="John Constable">John Constable</a></dd>
    <dd><a href="#" title="Claude Monet">Claude Monet</a></dd>
  </dl>
</div>
</body>
</html>


演示：http://www.54caizi.org/demo/dl-menu.html

]]>Web编程http://www.54caizi.org/post/dl-menu.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=50http://www.54caizi.org/cmd.asp?act=tb&id=50&key=1e22ef33div+css布局中多列等高处理a@b.com (风流才子)http://www.54caizi.org/post/autoHeight.htmlWed, 06 Aug 2008 14:36:27 +0800http://www.54caizi.org/post/autoHeight.html看代码：

function autoHeight() {
  if (arguments.length > 1) {  //参数个数必须大于1才执行函数
    
    var x = arguments.length;  //计算参数个数
    var elements=[];  //定义一个临时数组容器
    //循环取出各个列的高度值
    for (i=0; i<x; i++) {
      elements.push(document.getElementById(arguments[i]).scrollHeight);
    }
    //用冒泡法取出最大列高的值
    var max = elements[0];
    for(i=0; i<x; i++) {
      if(max < elements[i]) {
        max = elements[i];
      }
    }
    //再用循环将最大列高的值赋予各个列
    for (i=0; i<x; i++) {
      document.getElementById(arguments[i]).style.height = max+"px";
    }
  }
}

用了最原始的冒泡法来取得最大列高的项目，其实冒泡法的效率是比较低的，但想到实际应用中最多也应该不会超过4,5个列，那效率就根本不是问题了，没任何感觉。
如果各位有什么好的算法可以快速的取出一个数组中最大值，请回复告知，谢谢。

做了个演示页面：http://www.54caizi.org/demo/autoHeight.html

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/autoHeight.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=49http://www.54caizi.org/cmd.asp?act=tb&id=49&key=de4395d1解决IE6下PNG图片不透明的问题a@b.com (风流才子)http://www.54caizi.org/post/enablePngImages.htmlTue, 05 Aug 2008 17:14:16 +0800http://www.54caizi.org/post/enablePngImages.html有人会选择换成gif格式，但gif格式虽然可以做到透明，但会有毛边，很不美观，不爽。
在网上找到了几个方法，觉得这个方法最简单，才子修改了一下函数，直接针对IE6有效，其它浏览器不会执行此函数。也就不需要用到IE独有的条件注释来判断了。
看原代码：

function enablePngImages() {
  var imgArr = document.getElementsByTagName("IMG");
  for(i=0; i<imgArr.length; i++){
    if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
      imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
      imgArr[i].src = "images/none.gif";
    }

    if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
      var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
      imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
      imgArr[i].style.backgroundImage = "url(images/none.gif)";
    }
  }
}

原理就是通过 javascript 和 css 滤镜来解决。images/none.gif是一张空白一个像素的图片。
调用时要采用IE独有的条件注释来判断，如下：

<!--[if lt IE 7]>
<script type='text/javascript'>
enablePngImages();
</script>
<![endif]-->


才子觉得这样调用不太方便，改了一下函数，添加了判断IE浏览器版本的代码，调用更方便。看代码：

function enablePngImages() {
  var imgArr = document.getElementsByTagName("IMG");
  var version = parseFloat(navigator.appVersion.split("MSIE")[1]);

  if (version = 6.0 && (document.body.filters)) {
    for(var i=0, j=imgArr.length; i<j; i++){
      if(imgArr[i].src.toLowerCase().lastIndexOf(".png") != -1){
        imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imgArr[i].src + "', sizingMethod='auto')";
        imgArr[i].src = "images/none.gif";
      }

      if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(".png") != -1){
        var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
        imgArr[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
        imgArr[i].style.backgroundImage = "url(images/none.gif)";
      }
    }
  }
}

加了判断IE版本的代码，如果为IE6就执行。
调用如下：

window.onload = function() {
  enablePngImages();
}

为什么要用window.onload呢？这是表示加载完页面内容再执行指定的函数，保证png图片加载完成了再执行。

做了个演示页面：http://www.54caizi.org/demo/enablePngImages.html


]]>Web编程http://www.54caizi.org/post/enablePngImages.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=48http://www.54caizi.org/cmd.asp?act=tb&id=48&key=eb77d323关于table如何通过XHTML验证那档子事a@b.com (风流才子)http://www.54caizi.org/post/table-to-valid.htmlMon, 28 Jul 2008 23:03:19 +0800http://www.54caizi.org/post/table-to-valid.html一般我们写表格都是这样子写的：

<table border="0" width="100%" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">XXX</td>
    <td bgcolor="#FFFFFF">XXX</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">XXX</td>
    <td bgcolor="#FFFFFF">XXX</td>
  </tr>
</table>

在table里定义边框(border)为0，定义背景颜色，而表格间距(cellspacing)定义为1，再在td里定义背景颜色，这样table虽然定义了背景，但table里布满了td，td也定义了背景，table里还定义了表格间距为1，所以变成table的背景只留下了表格的间距了，其它地方已经被td的背景覆盖了，看起来像个定义了1px边框的表格一样。
这样的写法是我们很早以前的写法了，那时我们都还没有关注web标准，也基本没有关注css样式，但现在我们可以定义一个css，可以简化及分离一下，如：

<style type="text/css">
table {
  border: 0px;
  width: 100%;
  background: #000000;
}
td {
  background:#FFFFFF;
}
</style>
<table cellspacing="1">
  <tr>
    <td>XXX</td>
    <td>XXX</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td>XXX</td>
  </tr>
</table>

嗯，好像清爽了很多，表格与样式基本分离了，但可以看到，cellspacing="1"这个属性还在，不能去掉，一去掉的话，表格间距就变成2px了，就不是那种1px的细线边框了，很难看。table默认的间距就是2px，真晕，干吗要默认为2px，还没法在CSS中定义cellspacing这个属性，这不是害人嘛。加上cellspacing="1"这个属性又没法通过XHTML验证，正是因为这个原因，所以导致很多追求完美的人去研究其它方法来代替表格，让其通过验证，汗。。。
其实我们大可不必这么“要求完美”，W3C从来没说过不允许使用table，table仍然是xhtml里非常重要的一部分，想想一个相对比较复杂的表格，如果用其它方法来代替表格，那不是要人命嘛。通不过验证就表示程序写得烂？呵呵，不至于吧。
但我们是不是就只能忍受着xhtml验证时的错误报告呢？其实也不是啦，因为我们一般用的都是规则表格，并不复杂，行数列数都是标准的，没有什么合并行合并列的，那其实还是有办法定义CSS，让其通过xhtml的验证的。
这里不得不说一说表格的标准写法，其实我们以前写table，严格来说都是错的，为什么呢？呵呵，因为一个完整的表格里可不光是只有tr和td的，还有thead(表头)，tfoot(表脚)，tbody(表身)等等，看下面的例子，这就是个完整的表格：

<table>
  <caption>表格介绍</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表脚1</td>
      <td>表脚2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>表身1</td>
      <td>表身2</td>
    </tr>
    <tr>
      <td>表身3</td>
      <td>表身4</td>
    </tr>
  </tbody>
</table>

caption是表格的介绍，说明这个表格里的是些什么东东，这个标签我们比较少用，可能绝大部分人都压根没用过这个标签。还请注意了，thead表头的单元格容器不是td而是th，它的默认字体会比表身及表脚要加粗一点。thead, tfoot, tbody三者顺序还不能乱动，tfoot是写在tbody前面的，但浏览时会自动的排到tbody的后面去的，不用担心，呵呵。
好了，这个表格没得说了吧，又完整，又没有任何其它的属性值，通过验证是肯定没问题的了。但如何来解决表格边框的问题呢？呵呵，看下面的CSS吧：

<style type="text/css">
table,td,th {
  border:1px #000000 solid;  /*边框为1像素的黑色实线*/
  border-collapse:collapse;  /*单元格相邻的边框合并*/
  background:#FFFFFF;  /*定义背景颜色*/
}
</style>

没错，就这么简单，关键就在于第二句：border-collapse:collapse; 意思是将单元格相邻的边合并，单元格的边框都是1像素，相邻就应该有2像素了，但它们之间的边框被定义为合并了，不就还是1px吗？这不就是我们要的1px的细线边框吗？

OK，最后分享一下才子自己的完整CSS定义，感觉比较考虑比较周到也比较美观了，各位参考一下：

<style type="text/css">
table,td,th {
  border:1px #09F solid;
  border-collapse:collapse;
  padding:5px;
  background:#FFF;
}
table {
  margin:5px 0;
  width:100%;
  font:12px/1.5 Verdana, Geneva, Arial, Helvetica, Sans-Serif;
  text-align:left;
}
caption { text-align:left; font:bold 1.5em Verdana,Sans-Serif; }
thead th, tfoot td { text-align:center; background:#D9ECFF; }
thead th { font-size:120%; }
</style>

<table>
  <caption>表格介绍</caption>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>表脚1</td>
      <td>表脚2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>表身1</td>
      <td>表身2</td>
    </tr>
    <tr>
      <td>表身3</td>
      <td>表身4</td>
    </tr>
  </tbody>
</table>


风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/table-to-valid.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=44http://www.54caizi.org/cmd.asp?act=tb&id=44&key=de55bcc5利用DOM动态加载javascript文件a@b.com (风流才子)http://www.54caizi.org/post/dom-include-javascript.htmlSun, 27 Jul 2008 13:41:28 +0800http://www.54caizi.org/post/dom-include-javascript.html

/****************************************
 * 函数：incJS
 * 参数：file --- 需要加载的js文件的地址
 * 范例：incJS('/javascript/aa.js')
 ****************************************/
function incJS (file) {
  var el = document.createElement('script');
  el.src = file;
  el.type = 'text/javascript';
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(el);
}

这里解释一下file参数所指的地址，才子这里建议采用绝对目录地址。为什么要采用绝对目录，因为通常我们的javascript文件都放在某一个目录下，而我们调用javascript文件的页面却可能有N级目录，也许是根目录，也有二级目录，三级目录甚至四级目录，这样的话，如果采用相对目录会因为需要过多的去考虑相对目录的层数，还不如直接来个绝对目录方便。

演示：http://www.54caizi.org/demo/incjs.html

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/dom-include-javascript.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=43http://www.54caizi.org/cmd.asp?act=tb&id=43&key=f7d7d420一些不常用的meta的写法a@b.com (风流才子)http://www.54caizi.org/post/xhtml-meta.htmlSat, 26 Jul 2008 13:12:53 +0800http://www.54caizi.org/post/xhtml-meta.html但我们常用的meta标签大概就下面几个：

<!-- 指明本页面所采用的字符集编码 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- 指明本页面所采用的文字语言类型 -->
<meta http-equiv="content-language" content="gb2312" />
<!-- 指明关键字，SEOer应该很重视这个 -->
<meta name="keywords" content="风流才子,才子小窝" />
<!-- 页面内容简介，SEOer同样很重视这个 -->
<meta name="description" content="" />

其实meta标签没有什么限制的，用户可随意自己添加一些没有什么意义的meta标签，例如google和yahoo的站长管理工具里，要求验证站点时，就会要求你在首页的head里添加一句指定的meta，用来验证这个站点是否是你所拥有的。如：

<meta name="y_key" content="9ecba7f4549f5681" />

添加后，google和yahoo的验证工具会来获取这个标签值进行验证。

还有一些官方指明的meta标签，用处其实不小，但用的时候并不多，例如指明页面不许缓存，每次访问都必须从服务器上下载：

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-cntrol" content="no-cache, must-revalidate" />

前两个标签在官方的电子书上可以找到，但第三个没有找到，才子也不清楚有没有意义，但看到有人这样写。

<meta name="robots" content="all" />
<meta name="author" content="Macky, 风流才子" />
<meta http-equiv="content-script-type" content="text/javascript">

还有这三个标签用得也不算少，第一个告诉搜索引擎的机器人哪些页面需要索引，当然一般我们都会填写all啦
第二个是声明页面的作者，写不写似乎没什么意义。
第三个是指明页面中脚本的类型，HTML是前台，脚本当然一般就是javacript啦

我们还可以自定义一些标签来声明一些内容，才子在一个世界知名的品牌网站上看到过如下内容：

<meta name="copyright" content="www.54caizi.org" />
<meta name="identifier-url" content="www.54caizi.org" />
<meta name="organization" content="www.54caizi.org" />
<meta name="publisher" content="www.54caizi.org" />

以上这些标签虽然并没有什么意义，但显得这个网站够专业，够权威嘛，嘿嘿。
第一个是版权，第二个是标识符，第三个是声明机构，组织，第四个是发行者

当然还有一些标签，如声明Generator (编辑器)，Page-Enter、Page-Exit (进入与退出时的效果)等等，免了吧，不建议用，没任何意义了。

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/xhtml-meta.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=40http://www.54caizi.org/cmd.asp?act=tb&id=40&key=785180b8扩展DOM层的控制开关a@b.com (风流才子)http://www.54caizi.org/post/javascript-viewnone.htmlSun, 20 Jul 2008 23:42:52 +0800http://www.54caizi.org/post/javascript-viewnone.html模糊控制指定层的显示与否。
PS：所谓模糊控制是指，当一个层的显示与否未知的情况下，触发这个函数时，被指定的层，原本是显示的变为不显示，而原本不显示的变为显示，才子称其为模糊控制，汗，这种名称都被才子想得出来，晕一下。

原函数如下：

function viewnone(e){
  var obj = document.getElementById(e);
  obj.style.display=(obj.style.display=="none")?"":"none";
}

调用方法就指定一个ID号即可，如：

<div id="testDiv1">这里是层1</div>
<input type="button" value="层的开关" onclick="viewnone('testDiv1');" />

非常简单，通过取得指定DOM层的ID，获得一个对象，取其style.display的属性值并加以修改，如原本为none，即不显示时，将其值修改为""，即取消了不显示，就变为显示；如原本就是没有display的属性值，也就是原本是显示出来的，则修改其属性值为none，变为不显示。
函数简单高效，符合HTML DOM，所有浏览器均有效。

但今天做一个页面，需要指定某个层的显示与否，是明确指定，就算原本是显示的，触发一个函数仍然是显示，反之也一样。那么上面这个函数就显示不适合了，本来想重新编写一个函数来控制的，想想没什么必要，干脆直接在原函数上修改一下就行了，于是就有了下面这个函数：

function viewnone(e){
  var obj = document.getElementById(e);
  obj.style.display=(obj.style.display=="none")?"":"none";
  if (arguments.length == 2) {
    if (arguments[1]=="show") {
      obj.style.display="";
    } else if (arguments[1]=="hide") {
      obj.style.display="none";
    }
  }
}

调用时还需要再指定一个明确的开关了，如：

<div id="testDiv2">这里是层2</div>
<input type="button" value="关闭层2" onclick="viewnone('testDiv2','hide');" />
<input type="button" value="打开层2" onclick="viewnone('testDiv2','show');" />

大家看到只是加了几行而已，没有修改原函数的名字及参数，直接用arguments的特性做了一下扩展，arguments表示参数的集合，与数组非常类似，同样有下标，也是用arguments[n]这样的形式进行访问，下次再专门写篇关于arguments与Array(数组)方面的文章再做进一步探讨，这里就不多介绍了。
上面这个修改后的函数，就添加了几行代码，通过取得arguments的长度来判断是否有指定层的开关，如果arguments长度为2，表示引入的参数有两个，第一个不用多，就是DOM的层ID，而第二个参数就是明确指定的开关值，其值有两个：分别为show和hide，就是通过判断这个参数的值来明确指定层的显示与否，后面的代码相信不用多解释大家也都应该明白意思了。

还有疑问的请看详细的使用范例：
http://www.54caizi.org/demo/javascript-viewnone.html

风流才子 作品，转帖请保留原文地址链接，谢谢合作！
才子小窝：http://www.54caizi.org

]]>Web编程http://www.54caizi.org/post/javascript-viewnone.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=34http://www.54caizi.org/cmd.asp?act=tb&id=34&key=cfb94087[转]深入认识javascript中的eval函数a@b.com (风流才子)http://www.54caizi.org/post/javascript-eval.htmlSat, 19 Jul 2008 23:28:58 +0800http://www.54caizi.org/post/javascript-eval.htmleval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下：

var code1='"a" + 2';  //表达式
var code2='{a:2}';    //语句
alert(eval(code1));    //->'a2'
alert(eval(code2));    //->undefined
alert(eval('(' + code2 + ')'));    //->[object Object]

可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。

现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子：

var s='global';    //定义一个全局变量
function demo1(){
  eval('var s="local"');
}
demo1();
alert(s);  //->global

很好理解，上面的demo1函数等价于：function demo1(){var s='local';}，其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情，毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下，可以发现eval函数的特点，它总是在调用它的上下文变量空间（也称为：包，closure）内执行，无论是变量定义还是函数定义都是如此，所以如下的代码会产生函数未定义的错误：

var s='function test(){return 1;}';    //一个函数定义语句
function demo2(){
  eval(s);
}
demo2();
alert(test());    //->error:test is not defined

这是因为test函数在局部空间定义，demo2函数内可以访问到，外面就访问不到了。

而在实际的Ajax开发中，有时我们需要从服务器动态获取代码来执行，以减轻一次载入代码过多的问题，或者是一些代码是通过Javascript自身生成的，希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成，比如：

function loadCode(){
  var code=getCode();
  eval(code);
}

可见eval不可能在全局空间内执行，这就给开发带来了不少问题，也看到过很多人为此郁闷。

不过现在偶终于找到了解决办法，嘿嘿，可以同时兼容IE和Firefox，方法如下：

var X2={}  //my namespace:)
X2.Eval=function(code){
  if(!!(window.attachEvent && !window.opera)){
    //ie
    execScript(code);
  }else{
    //not ie
    window.eval(code);
  }
}

现在如果要想在函数内定义全局代码，就可以通过调用X2.Eval(code)方法，一个例子如下：

var s='global';
function demo3(){
  X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'

可见，在demo3函数内重新定义了全局变量s="local"。
需要注意的是X2.Eval并不返回值，如果要进行表达式的求值，还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。

其实看到这里，或许有人感觉问题也太容易解决了点，呵呵，但发现这个办法倒是需要些运气和技巧的：
（1）对于IE浏览器，默认已经提供了这样的函数：execScript，用于在全局空间执行代码，只是知道的人还不多。
（2）对于Firefox浏览器，直接调用eval函数，则在调用者的空间执行；如果调用window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true！

Firefox的eval函数的特点的确是很令人奇怪的，但从javascript规范中倒也能找到其来源：

If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.

意思大概就是说eval函数的执行是和调用者相关的，但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了，大家知道解决办法就好。
]]>Web编程http://www.54caizi.org/post/javascript-eval.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=33http://www.54caizi.org/cmd.asp?act=tb&id=33&key=f5f2d490一个漂亮的可拖动的弹出窗口a@b.com (风流才子)http://www.54caizi.org/post/alertmsg.htmlWed, 16 Jul 2008 20:50:41 +0800http://www.54caizi.org/post/alertmsg.html觉得还不是非常满意，自己动手改了一改，感觉不错，分享出来。
代码用javascript封装，调用很简单，效果经过才子严格测试，支持IE5.5, IE6, IE7, FireFox2, FireFox3, Opera9。
不多说，直接给演示：
http://www.54caizi.org/demo/alertMsg.html

请在演示里直接右键－查看源代码取得代码，这里就不贴代码了。

]]>Web编程http://www.54caizi.org/post/alertmsg.html#commenthttp://www.54caizi.org/http://www.54caizi.org/feed.asp?cmt=32http://www.54caizi.org/cmd.asp?act=tb&id=32&key=835fe1df