Web开发前端脚本
ajax提交含有html数据时的处理方法
[
2009/12/25 15:56 | by 袁旭东 ]
2009/12/25 15:56 | by 袁旭东 ]
这两天在把开发平台的Web版配置工具，已经有了桌面版的，不过那个是Only for Windows的，我在Ubuntu下就无法使用，甚至用Wine也不行。所以，也就有了Web版的配置工具，这样一来就可以跨平台了。
在我做的Web版的配置工具中，所有的提交数据都是用的ajax，因为是开发平台的配置工具，所以也就遇到需要提交包含有html代码的数据。这时候问题就来了，不管是对数据不编码，用escape()编码、encodeURI()编码还是用encodeURIComponent()编码，提交数据是，服务器都会报错，估计是某些这些编码函数无法编码的字符造成的，既然这样，那我们就自己写一个javascript函数，用来替换特殊字符，服务端接受后再反编码回来就可以了。函数如下：
在我做的Web版的配置工具中，所有的提交数据都是用的ajax，因为是开发平台的配置工具，所以也就遇到需要提交包含有html代码的数据。这时候问题就来了，不管是对数据不编码，用escape()编码、encodeURI()编码还是用encodeURIComponent()编码，提交数据是，服务器都会报错，估计是某些这些编码函数无法编码的字符造成的，既然这样，那我们就自己写一个javascript函数，用来替换特殊字符，服务端接受后再反编码回来就可以了。函数如下：
一个不错的获取url参数jquery插件
[ 2009/12/15 17:01 | by 袁旭东 ]
2009/12/15 17:01 | by 袁旭东 ]
今天在对html文件取url参数时用到了一个JQuery插件，很不错，拿出来分享。用法如下：
插件的代码如下：
引用
比如一条url：http://127.0.0.1/index.html?id=999&type=2
那么在index.html中这样写就可以获得id和type的值
var id=$.query.get("id"); // id=999
var type=$.query.get("type"); // type=2
那么在index.html中这样写就可以获得id和type的值
var id=$.query.get("id"); // id=999
var type=$.query.get("type"); // type=2
插件的代码如下：
网站使用UTF-8编码时引起的JavaScript错误
[ 2009/12/01 14:47 | by 袁旭东 ]
2009/12/01 14:47 | by 袁旭东 ]
今天同事遇到一个奇怪的问题，就是他的IE6浏览我们的网站时，出现Javascript错误，因此一部分JavaScript相关功能无法实现，而其他人使用IE7/8、Firefox就没有这样的情况。所以我检查了我的代码，没有发现异常情况。于是我就想到了昨天为彻底解决乱码问题，我将网站的编码更改为了UTF-8，会不会是因为这个而引起的呢？
我查看了所有的JavaScript文件，其中的一个日期选择js文件是ANSI编码的，我将其更改为UTF-8后上传覆盖，问题解决。
因此，在网站使用UTF-8编码时，如果JavaScript文件使用的是ANSI并且其中有中文等双字节字符时，在IE6浏览时会出现JavaScript错误，IE7/8、Firefox正常。解决方法是，将JavaScript文件统一更改为UTF-8格式。
我查看了所有的JavaScript文件，其中的一个日期选择js文件是ANSI编码的，我将其更改为UTF-8后上传覆盖，问题解决。
因此，在网站使用UTF-8编码时，如果JavaScript文件使用的是ANSI并且其中有中文等双字节字符时，在IE6浏览时会出现JavaScript错误，IE7/8、Firefox正常。解决方法是，将JavaScript文件统一更改为UTF-8格式。
Chrome不支持ajax动态写入css和javascript
[ 2009/05/22 23:14 | by 袁旭东 ]
2009/05/22 23:14 | by 袁旭东 ]
不知道google是怎么搞的，竟然不支持，也许是safari内核的原因吧，我没安装safari，所以也没有办法去证实了。现在还没有想到解决办法，不过我想是应该有解决办法的。明天好好研究一下。先把这个问题搁在这里，明天来解决。（待续）
关于IE不支持css的clear:right的解决方法
[ 2009/05/20 16:22 | by 袁旭东 ]
2009/05/20 16:22 | by 袁旭东 ]
今天在做一个使用div模仿table的应用，我是在firefox下做的，css比较简单，大概样子如下
以上css大概看看就行了，大致意思就是设置好div的高度和宽度，然后设置边线，最右边的div clear:right，然后就是一行新的。大概的html代码如下
引用
.title_l{width:500px;border:1px solid #999;}
.title_r{width:100px;border-top:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;clear:right;}
.title_l,.title_r{float:left;height:26px;line-height:26px;text-align:center;font-weight:bold;background-color:#d5e5ff;padding:2px;}
.cfg_main_l{clear:left;width:500px;cursor:pointer;}
.cfg_main_r{clear:right;width:100px;border-right:1px solid #999;text-align:center;}
.cfg_main_l,.cfg_main_r{float:left;height:23px;line-height:23px;border-bottom:1px solid #999;border-left:1px solid #999;padding:2px;}
.title_r{width:100px;border-top:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;clear:right;}
.title_l,.title_r{float:left;height:26px;line-height:26px;text-align:center;font-weight:bold;background-color:#d5e5ff;padding:2px;}
.cfg_main_l{clear:left;width:500px;cursor:pointer;}
.cfg_main_r{clear:right;width:100px;border-right:1px solid #999;text-align:center;}
.cfg_main_l,.cfg_main_r{float:left;height:23px;line-height:23px;border-bottom:1px solid #999;border-left:1px solid #999;padding:2px;}
以上css大概看看就行了，大致意思就是设置好div的高度和宽度，然后设置边线，最右边的div clear:right，然后就是一行新的。大概的html代码如下
修改JQuery使其支持Chrome判断
[ 2009/05/05 12:51 | by 袁旭东 ]
2009/05/05 12:51 | by 袁旭东 ]
还是一个浏览器版本判断问题，昨天使用Chrome时，发现JQuery将其判断为Safari，这个显然是错误的（也许Chrome与Safari有一段渊源吧）。反正Jquery不会再修改$.browser了，那还是自己修改，和上次的修改类似。
打开jquery的代码，查找msie，将前面的
修改为
将前面的
修改为
这样，就可以正常判断Chrome及其版本了。以上修改在Chrome 1.0.154.59上测试通过。
打开jquery的代码，查找msie，将前面的
引用
o.browser={version:(C.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[0,"0"])
修改为
引用
o.browser={version:(C.match(/.+(?:rv|it|ra|ie|firefox|chrome)[\/: ]([\d.]+)/)||[0,"0"])
将前面的
引用
safari:/webkit/.test(C)
修改为
引用
chrome:/chrome/.test(C),safari:/webkit/.test(C)
这样，就可以正常判断Chrome及其版本了。以上修改在Chrome 1.0.154.59上测试通过。
JQuery中对于Firefox版本判断Bug的解决方法
[ 2009/05/04 14:04 | by 袁旭东 ]
2009/05/04 14:04 | by 袁旭东 ]
使用JQuery可以减少很多Javascript的代码量，大大减轻了我们编写javascript的工作量。JQuery非常好，但是它也有不如意的地方，比如对浏览器版本的判断问题。这个问题很早以前的版本就一直存在了，到了现在最新的1.3.2也没有修改。不过JQuery 说$.browser这个是属于废弃的，我估计他们是不会修改了，那只好自己修改。其实修改起来也是相当简单的。
解决Firefox死循环刷新问题
[ 2009/05/04 13:48 | by 袁旭东 ]
2009/05/04 13:48 | by 袁旭东 ]
曾经做过一个通行证网站，程序里面用到了框架里的页面要刷新父窗体的问题，我使用了以下代码
引用
<script language="javascript">
top.window.location.reload();
</script>
top.window.location.reload();
</script>
Firefox和IE，通过JavaScript调用iframe中页面的函数
[ 2009/04/23 10:31 | by 袁旭东 ]
2009/04/23 10:31 | by 袁旭东 ]
我在做一个网站的时候，遇到需要调用父窗体中 iframe 中页面里的一个javascript函数，我是这样写的
这个写法，在IE里是没有问题的，但是到了Firefox下就无效了。那么如何同时兼容Firefox和IE呢？在MSDN中查找，并且实验，最后终于找到方法了，如下
引用
parent.iframe_id.function_name();
这个写法，在IE里是没有问题的，但是到了Firefox下就无效了。那么如何同时兼容Firefox和IE呢？在MSDN中查找，并且实验，最后终于找到方法了，如下
使用div+css设计页面的时候，如果不使用javascript配合，则无法实现左右分栏，一侧宽度固定，另一侧自适应屏幕宽度。因为css不支持100%-100px这样的形式。下面我就将我最近写的一个示例页面发上来。
html文件
html文件
