4's symfony blog » JavaScript http://www.foolbirds.com all about symfony Fri, 14 Oct 2011 12:36:02 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 在IE下使用Script Debugger调试javascript兼容性问题 http://www.foolbirds.com/%e5%9c%a8ie%e4%b8%8b%e4%bd%bf%e7%94%a8script-debugger%e8%b0%83%e8%af%95javascript%e5%85%bc%e5%ae%b9%e6%80%a7%e9%97%ae%e9%a2%98.html http://www.foolbirds.com/%e5%9c%a8ie%e4%b8%8b%e4%bd%bf%e7%94%a8script-debugger%e8%b0%83%e8%af%95javascript%e5%85%bc%e5%ae%b9%e6%80%a7%e9%97%ae%e9%a2%98.html#comments Mon, 28 Jun 2010 07:30:39 +0000 maker http://www.foolbirds.com/?p=1325 下一步->下一步->下一步->下一步->下一步…. 安装完毕后, 进入Internet选项->高级, 如下图把禁用脚本调试(Internet Explorer)和禁用脚本调试(其他)两个选项关闭掉. 如果你忘了这步, 那么, 痛苦去吧, 你会发现和没装没什么差别. 搞定上一步之后, 找你的错误去吧. 我刚刚发现我还装过另一个调试工具,我怎么就不记得了呢… 如何实现动态添加／删除表格元素]]> 该死的浏览器战争,苦了我们这群web开发者,每天都要面对html兼容性,css兼容性,javascript兼容性! 还有什么比这更要命的么?

通常情况下, 我都用Firefox下的Firebug插件来开发Javascript应用, 但是经常会有代码在IE下就失去作用, 而且IE的错误提示还很模糊, 经常会让我无从下手.

以前听说过IE下的一些调试工具,从没用过,刚刚被一个语法错误逼的没办法向bobhero求助,他推荐我装了Script Debugger.

这是微软开发的一款开发工具, Google之, 进入微软的网站下载安装, 如果你不是Win98或者Win Me记得要下载 Script Debugger for Windows NT 4.0 and Later, 否则等着杯具去吧.

安装过程大概就是, 下一步->下一步->下一步->下一步->下一步->下一步….

安装完毕后, 进入Internet选项->高级, 如下图把禁用脚本调试(Internet Explorer)和禁用脚本调试(其他)两个选项关闭掉. 如果你忘了这步, 那么, 痛苦去吧, 你会发现和没装没什么差别.
ie-script-debugger-01

搞定上一步之后, 找你的错误去吧.
ie-script-debugger-02

ie-script-debugger-03

我刚刚发现我还装过另一个调试工具,我怎么就不记得了呢…

]]> http://www.foolbirds.com/%e5%9c%a8ie%e4%b8%8b%e4%bd%bf%e7%94%a8script-debugger%e8%b0%83%e8%af%95javascript%e5%85%bc%e5%ae%b9%e6%80%a7%e9%97%ae%e9%a2%98.html/feed 6 如何实现动态添加／删除表格元素 http://www.foolbirds.com/%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%ef%bc%8f%e5%88%a0%e9%99%a4%e8%a1%a8%e6%a0%bc%e5%85%83%e7%b4%a0.html http://www.foolbirds.com/%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%ef%bc%8f%e5%88%a0%e9%99%a4%e8%a1%a8%e6%a0%bc%e5%85%83%e7%b4%a0.html#comments Thu, 20 May 2010 01:48:17 +0000 kthiz2006 http://www.foolbirds.com/?p=1185 此效果是用jquery实现的,现代码如下:

／／监听添加表格行数的阿按扭
$(document).ready(function(){
$("#but").click(function(){
var $table=$("#tab tr");
var len=$table.length;
$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'><img width=\'140\' src=\'images/1.jpg\'></td><td align=\'center\'><a href=\'javascript:void(0)\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr& gt;");
})
})


／／删除指定的表格的行
function deltr(index)
{
$table=$("#tab tr");
$("tr[id=\'"+index+"\']").remove();
}

以下写在body中即可

//添加按钮
<input id="but" type="button" value="添加" />


//空的表格
<table class="print_product_img" id="tab" border="1" width="60%" align="center">
</table>

]]> http://www.foolbirds.com/%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%ef%bc%8f%e5%88%a0%e9%99%a4%e8%a1%a8%e6%a0%bc%e5%85%83%e7%b4%a0.html/feed 4 兼容IE6,IE7,IE8和Firefox的图片上传预览效果 http://www.foolbirds.com/image-upload-preview.html http://www.foolbirds.com/image-upload-preview.html#comments Thu, 06 Aug 2009 16:29:54 +0000 maker http://www.foolbirds.com/?p=967 所谓图片上传预览，就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果，关于这个效果我一直认为是无法做到的，没想到前不久被zhuozi搞定了。

网上流传的一些关于图片上传预览的代码都是差不多的，IE6下使用文件选择对象的value属性取出将要上传的本地文件路径，然后使用本地路径构造img标签，代码如下：

<input type="file"
onchange="document.getElementById('view').innerHTML=' <img src=\'' + this.value + '\'/>';" />
<div id="view"> </div>

网上有些人说上面的代码可以在IE7下生效，但实际测试是不行的，因为IE7的img标签不支持本地路径，所以需要使用div和css的filter来实现这个效果，代码如下：

<input type="file" onchange=‘javascript:
document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src
= this.value;’ /><br />
<div id="pic"
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:400px;height:200px;"></div>

而关于Firefox的图片上传预览效果，网上几乎找不到相关资料，比较容易想到的解决方案无非是自动将图片上传到服务器再显示出来诸如此类，但这里我们不对此类技术进行讨论，我们要做的是正宗的上传前本地预览。

以下是最后的研究结果，同时兼容IE6,IE7,IE8和Firefox。

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview()
{
document.getElementById('preview').style.display = 'none';
// 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
document.getElementById('box').innerHTML
= "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
这里用来解决图片加载延时造成的预览失败.
简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
*/
if ( image.width == 0 || image.height == 0 ) {
setTimeout(buttonShow, 1000);
} else {
document.getElementById('preview').style.display = 'block';
}
}
function loadImage(ele) {
picPath   = getPath(ele);
image     = new Image();
image.src = picPath;
setTimeout(buttonShow, 1000);
}
function getPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" name="pic" id="pic" onchange='loadImage(this)' />
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
<div id='box'></div>
</body>
</html>

补充：
上面的代码经过测试貌似不是那么稳定，一些机器上的IE7会失效，我在6台电脑上测试，FF全通过，IE7下有一台没有通过，估计是和IE的设置有关， 而且即使可以正常使用也不是每次都可以成功显示出预览按钮，这个原因也没有找到，估计是图片加载失败什么的，所以例子里特殊处理的预览按钮的显示，即时预览功能失败也不影响其他功能。

下面是在我机器上IE7的测试图片：

image-upload-preview-ie7

]]> http://www.foolbirds.com/image-upload-preview.html/feed 10 Firefox 和 IE 中的键盘事件 http://www.foolbirds.com/firefox-and-ie-pressup.html http://www.foolbirds.com/firefox-and-ie-pressup.html#comments Wed, 27 May 2009 05:23:09 +0000 zhuozi http://www.foolbirds.com/?p=855 今天，在测试项目中的form表单的时候，发现了一些被遗忘的细节问题，邮政编码和电话没有被验证。

对于，symfony的form机制，验证起来很方便，利用这个框架不用像以前自己在前端写一大堆的js进行判断。

可是，毕竟客户的需求总是奇怪的，在新项目中，有一个地方没有办法直接应用symfony中的fomr机制，没有办法偷懒只用js了。
if(window.event) { //IE键盘监控
if(e.keyCode<48   ||   e.keyCode>57||e.keyCode==8) {
return false;
} else {
return true;
}
} else if(e.which) { // Firefox 键盘监控
if((e.which>47)   &&   (e.which<58)||(e.which==8)) {
return true;
} else {
return false;
}
}

html代码
onkeypress="javascript:return key(event)

对于前端程序(css、js)来说，两大浏览器的兼容问题很是麻烦。
对于键盘事件，两个浏览器有着不同的理解。为了防止遗忘，把上面转载的程序在此备份，以便查找。

随机日志

]]> http://www.foolbirds.com/firefox-and-ie-pressup.html/feed 0