解决表单(Form)重置reset is not a function脚本出错

实际上很久之前遇到过一回,结果最近开发又遇到这个Bug,而且也折腾了我一些时间,比如说我在利用Ajax提交表单后,需要重置表单各项内容从交互上来避免用户重复提交,正常的表单HTML结构如下所示:

<form action="" method="post" id="LoginForm">
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" />
  <input type="submit" id="submit" name="submit" value="Login" />
  <input type="reset" id="reset" name="reset" value="Reset" />
</form>

继续阅读

网页HTML中电子邮箱(Email)地址的加密和混淆防采集

邮箱里垃圾邮件一直有很多,这让我不得不重新审视,发布在网页上的电子邮箱地址,为了避免垃圾邮件,我刻意将@更换成#,也许这在十年前是个不错的办法,但是随着神经网络和机器学习新算法的发展,这一类小手段也面临失效的风险,因为大部分都是通过修改电子邮箱地址的“@”符号,通过正则表达式筛选和特征值匹配,比如hotmail.com、gmail.com、163.com这一类疑似电子邮箱地址的特征,还是可以抓取到电子邮箱地址,所以在将Email发布到HTML网页之前我们要对其进行加密和混淆。

下面我以john@example.com为例,介绍几种加密和混淆的反垃圾邮件手段。

1. 生成图片

利用传统的图灵测试CAPTCHA,将防止采集的电子邮箱地址生成图片,利用机器不能识别的特性,来区别人和机器,生成图片的方式有很多,除了高大上的Photoshop外,甚至可以使用系统自带的绘图工具来完成,另外希望偷懒的话,还有一些在线工具可以帮助到你,比如《Top 10 Websites to Turn Your Email Address into An Image》

继续阅读

JavaScript/JQuery优雅的屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法。

由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制、右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScript实现的,另外一些手机应用也可以是由HTML5+JavaScript实现的,在这种情形下,限制右键就是有必要的了,因为作为APP来说,网页的右键选择文字及弹出菜单在大多数情况下显得没有必要了。

继续阅读

解决Uploadify上传控件加载导致的GET 404 Not Found问题

项目中要用到上传,由于使用了JQuery脚本库,于是就准备找一款JQuery的上传脚本,挑了几款,觉得都还不错,最后从功能和代码体积的前提下决定采用Uploadify(官方主页)。

代码很轻松的就嵌入到页面中去了,看了下官方的几个配置,感觉挺容易上手的,本来以为就这样配置算完成了,但是今天在FireFox下使用FireBug调试页面时发现了诡异的GET请求,请求的是当前页面的根,比如页面是/tickets/create,那么请求的就是/tickets/,恰恰这个路径我没有设置路由,也就是说请求将返回一个HTTP 404 Not Found的错误,经过进一步的跟踪发现了问题和新加入的Uploadify有关,于是我又检索了官方的文档,结果该配置的都配置了,配置信息是没有什么错误,但是这个诡异的GET依然存在。

继续阅读

ASP/JScript将字典对象(Scripting.Dictionary)存储到Application

最近要改进一个旧项目,项目采用ASP(JScript)编写,由于时间问题一直没有重构,所以还是ASP将就着,考虑到效率问题,准备把部分内容缓存起来,当然直接读写Application缓存不是很妥当的,遂采取缓存字典对象(Scripting.Dictionary)来实现。好了,一般会认为代码如下所示:

var key = "dict_cache"
var obj = Server.CreateObject("Scripting.Dictionary");
 
Application.Lock();
Application.Contents(key) = obj;
Application.Unlock();

偏偏事与愿违,如果你这样做的话,IIS会报“不允许的对象使用方式”错误,具体内容如下:

Application 对象 错误 'ASP 0197 : 80004005' 

不允许的对象使用方式 

/index.asp,行 12 

不能将具有单元模型行为的对象添加到应用程序的内部对象中。 

继续阅读

判断浏览器客户端是否禁用JavaScript脚本

主流现代浏览器默认都不会禁用js脚本的,但是也有例外,除了用户主动禁用脚本外,还有就是维护模式下的安全浏览,这样会禁用页面上的js脚本。

禁用了脚本会发生什么?哦,JQuery无法使用?准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效,比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会,严重一点可能感觉像是过着盲人的生活,呵呵,不过有一点可以肯定的是未开启脚本的这部分用户少之又少,我们可以抛弃他们。你说什么?抛弃我们的客户?这怎么可以?别急,下面我要介绍的就是针对这部分用户的判断,以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了,我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用,见得最多的例子是用在统计代码上面,比如有下面的代码:

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

继续阅读

解决IE7-JS导致的JavaScript Invalid argument错误

本来想让旧版本的IE6、IE7以及IE8也能应用一些新特性的,于是尝试使用了ie7-js这款兼容性脚本。关于ie7-js这个我在前面的文章中介绍过,主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
< ![endif]-->

通过上面的代码引入后,效果确实是有了,但是出现了JS错误,特别是在IE6下JavaScript会报类似下面错误:

继续阅读

JavaScript类似于eval加密编码方式的解密解码过程(Unpack)

类似于下面这样的代码,肯定你在研究前端JavaScript脚本时遇到过:

1
2
3
4
5
6
7
8
9
10
eval(function(p,a,c,k,e,r){
e=String;if(!''.replace(/^/,String))
{while(c--)r[c]=k[c]||c;
k=[function(e){return r[e]}];
e=function(){return'\\w+'};
c=1};while(c--)if(k[c])
p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),
k[c]);return p}
('0("1 2");',3,3,
'alert|Hello|World'.split('|'),0,{}))

很多朋友以为这段代码是“加密”的,其实这也谈不上是加密,只能算是一种编码(Encode)或者也可以成为是一种打包(packer),类似于base64这样的编码,都是可以以一定方式还原的,当然也就是“解密”了。

我们仔细分析这一段代码,不难发现代码开头都是eval,特征字符串是function(p,a,c,k,e,r)或者是function(p,a,c,k,e,d),其实这样的pack方式是dean edwards提出的,你可以访问其个人主页以获取这方面的最新信息。后来还有一些编码打包方式也是eval开头,但是特征字符串p,a,c,k,e,r(d)改变了,我们姑且称为是这种打包方式的一个变种吧,其实解码很简单,我们回顾一下JavaScript脚本中eval含义及用法。

继续阅读

JavaScript让登录或搜索文本框自动获得焦点

这确实是个值得注意的细节,今天在XX网站登录界面上遇到了,就先记录下来了,每个网页都有其专注的功能,有的专注于文章资讯等信息呈现,有的专注于视频播放,有的专注于登录,今天要说的就是专注于像登录或搜索等类似功能的网页,打开这一类页面,你会发现有些做得比较好的页面,输入焦点会自动落在要填写信息的第一个文本框里,这样我们就不需要再点击鼠标让此类文本框获得焦点了,这样无形中为用户减少了一步点鼠标的操作,易用性就显著增强了,当然这类效果都是由JavaScript脚本实现的,具体的实现方式也很简单,即使用Obj.focus()方法,使Obj对象获取焦点,但是在实际操作中还是有很多方面需要注意的。

首先,我们要获取文本框对象,这就注定了我们这段脚本必须在文本框渲染完成后才执行,参考多数登录框的设计方案,这类脚本一般都是放在HTML的最后部分,位置在</body>之前,这样在input加载完成后才执行脚本,避免找不到对象的问题。

其次,Obj.focus()方法需要延时调用,并不等于说我们input文本框呈现出来就可以立即设置focus焦点,大部分情况下这样做也许可以成功,但是多测试几次你会发现有时焦点并不能成功设置,这里的原因是某些浏览器在input文本框渲染完成后不能立即为文本框启用获得焦点的特性,所以我们需要做一定的延时,在JavaScript里延时的方式是通过setTimeout函数,时间设置大概在200毫秒即可(参考WordPress的后台登录)。

最后,即使我们采用延时等措施,仍然会有小几率的情况导致无法获取焦点甚至让脚本执行出错,所以我们需要用try {} catch {} 屏蔽错误,无法获取焦点是小事,脚本出错就坑爹了。下面是实现的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 
<head>
<title>文本框获取焦点</title>
</head>
 
<body>
 
<p>
<input type="text" id="userName" />
</p>
<script type="text/javascript">
setTimeout( function(){
  try{
    document.getElementById('userName').focus();
  } catch(e){}
}, 200);
</script>
 
</body>
</html>

后来发现WP的登录页面除了focus还有select方法,原来在用户名记住的情况下,用户名文本框获得焦点后如果我们要清除原先的用户名,只有移动方向键或者使用鼠标选中然后删除,而select正好替我们做了选中这个事情,要输入就直接输入就行了,以上面的HTML为参考,具体的代码如下:

1
2
3
4
5
6
7
setTimeout( function(){
  try{
    var t = document.getElementById('userName');
    t.focus();
    t.select();
  } catch(e){}
}, 200);

END

兼容IE和FireFox设为首页和加入收藏的JavaScript代码

设为首页和加入收藏一直是很多网站提供的小功能,今天特别研究了一下,传统的设为首页的代码如下:

<a href="#setHomePage" onclick="this.style.behavior='url(#default#homepage)';this.setHomePag('//wangye.org/');return false;">设为首页</a>

似乎很长的一段时间上面这段代码一直工作得很好,但是随着其他非IE内核的浏览器异军突起,比如FF(FireFox),很多童鞋发现这样的代码已经失去了原有的作用,所以兼容的代码就显得非常的重要了。

对于FireFox来说,安全设置成为阻碍设为首页代码的关键因素,不过我们不得不承认这些安全设置为我们安全浏览进行保驾护航,不过如果要在FF上设为首页,那么我们需要开启UniversalXPConnect权限,当然在启用这个权限的同时浏览器会提示安全消息要求用户授权,若用户不予以授权的话,下面的代码将会因为权限问题而得不到执行。(远程调试时如果不做相关设置将不会出现授权对话框,直接默认是拒绝授权)相关要求授权的对话框如下:

FireFox因特网安全.png

所以如果检测到用户没有授权,应该给出相关提示,详细的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (window.sidebar) {
  if (window.netscape) {
    try {
      netscape.security.PrivilegeManager
                  .enablePrivilege("UniversalXPConnect");
    } catch(e) {
             // this action was aviod by your browser,
             // if you want to enable,please enter
             // about:config in your address line,
             // and change the value of
             // signed.applets.codebase_principal_support to true
             alert("抱歉!您的浏览器不支持直接设为首页。" +
               "请在浏览器地址栏输入“about:config”并回车" +
               "然后将[signed.applets.codebase_principal_support]" +
               "设置为“true”,点击“加入收藏”后忽略安全提示,即可设置成功。");
    }
  }
  var prefs = Components.classes['@mozilla.org/preferences-service;1']
          .getService(Components.interfaces.nsIPrefBranch);
  prefs.setCharPref('browser.startup.homepage',url);
}

if (window.sidebar)是判断FF的一种方法,就像判断IE用if (document.all)一样,结合一下,兼容IE和FF的设为首页的代码如下:

继续阅读