手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

javascript中的document.write

这是一个来自mozilla taiwan论坛里的问题,这种情况很多人也应该是遇到过的。。。只是或许都采用了一些绕过的方法来解决的吧?

问题如下:

XML/HTML代码
  1. 請問一下以下的html code有什麼問題嗎?  
  2. 在IE下很正常,  
  3. 但在Firefox裏第二行的document.write好像就不能運作了  
  4. 而且一直顯示"載入中",好像在什麼地方卡住了..  
  5. 原始碼如下:  
  6. ------------------  
  7. <html>  
  8. <head>  
  9. <title> new document </title>  
  10. <script type="text/javascript">  
  11. <!--  
  12. var tmp = new Array(2);  
  13. tmp[0] = new Array(2);  
  14. tmp[0][0] = "lalala";  
  15. tmp[0][1] = "hahaha";  
  16.   
  17. function test(){  
  18. document.write(tmp[0][0]);  
  19. document.write(tmp[0][1]);  
  20. }  
  21. //-->  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <input type="button" value="test" onclick="javascript:test();">  
  26. </body>  
  27. </html>  

但,事实是什么样的的?有人这样回复:

XML/HTML代码
  1. document.write 表示你要重寫整個頁面,所以第一個指令執行後,整個頁面已予清除,第二個指令也就不見了  
  2.   
  3. 另外,JS 語法也不正確,應該是  
  4. document.open();  
  5. document.write(...);  
  6. :  
  7. document.close();  
  8.   
  9. 如果不要清除網頁,可用:  
  10. text = document.createTextNode("blah blah blah");  
  11. document.body.appendChild(text);  

最终,这样就解决了:

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title> new document </title>  
  4. <script type="text/javascript">  
  5. <!--  
  6. var tmp = new Array(2);  
  7. tmp[0] = new Array(2);  
  8. tmp[0][0] = "lalala";  
  9. tmp[0][1] = "hahaha";  
  10.   
  11. function test(tmp2){  
  12. document.open();  
  13. document.write(tmp2[0][0]);  
  14. document.write(tmp2[0][1]);  
  15. document.close();  
  16. }  
  17. //-->  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <input type="button" value="test" onclick="javascript:test(tmp);">  
  22. </body>  
  23. </html>  

详细原文请查看:http://forum.moztw.org/viewtopic.php?p=41521

Tags: taiwan

一段有意思的JS代码

这段JS代码很有意思,可以在页面上写字。。。
原文来自knowsky,不过不建议看原文,原文广告太多。
原文地址为:

http://www.knowsky.com/536226.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>写字</title>  
  6. <style type="text/css">  
  7. * {  
  8. -moz-user-select:none;  
  9. border:0px;  
  10. }  
  11. #tips {  
  12. width:850px;  
  13. padding-top:8px;  
  14. padding-bottom:8px;  
  15. background:#999999;  
  16. color:#FFFFFF;  
  17. text-align:center;  
  18. margin:auto;  
  19. font-size:14px;  
  20. }  
  21. </style>  
  22. <script type="text/javascript">  
  23. var Is_Mouse_Down = false  
  24. var Is_First=1  
  25. function Create(evt){  
  26.     evt=evt?evt:window.event  
  27.     if(Is_Mouse_Down){  
  28.         if(evt.ctrlKey){  
  29.             Clean(evt)  
  30.         }  
  31.         else {  
  32.             Write(evt)  
  33.         }  
  34.     }  
  35. }
  36. function Write(evt){  
  37.     evt=evt?evt:window.event  
  38.     var Obj_Nian=document.createElement("DIV")  
  39.     Obj_Nian.style.position="absolute"  
  40.     Obj_Nian.style.left=evt.clientX-10+"px"  
  41.     Obj_Nian.style.top=evt.clientY-10+"px"  
  42.     switch(Is_First){  
  43.         case 1:Obj_Nian.innerHTML=".";break;  
  44.         case 2:Obj_Nian.innerHTML=".";break;  
  45.         case 3:Obj_Nian.innerHTML=".";break;  
  46.         case 4:Obj_Nian.innerHTML=".";break;  
  47.         case 5:Obj_Nian.innerHTML=".";break;  
  48.         case 6:Obj_Nian.innerHTML=".";break;  
  49.         default:Obj_Nian.innerHTML="Error";break;  
  50.     }  
  51.     Is_First+=1  
  52.     if(Is_First==7){  
  53.         Is_First=1  
  54.     }  
  55.     Color_Nian="RGB("+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%,"+Math.floor(Math.random()*100)+"%)"  
  56.     Obj_Nian.style.color=Color_Nian  
  57.     document.body.appendChild(Obj_Nian)  
  58. }  
  59. function Clean(evt){  
  60.     evt=evt?evt:window.event  
  61.     evt.srcObj=evt.srcElement?evt.srcElement:evt.target  
  62.     if(evt.srcObj.tagName=="DIV" && (evt.srcObj.innerHTML=="." || evt.srcObj.innerHTML=="." || evt.srcObj.innerHTML=="." || evt.srcObj.innerHTML=="." || evt.srcObj.innerHTML=="." || evt.srcObj.innerHTML==".")){  
  63.         evt.srcObj.innerHTML=""  
  64.     }  
  65. }  
  66. document.onmousedown=function(){Is_Mouse_Down=true}  
  67. document.onmousemove=Create  
  68. document.onmouseup=function(){Is_Mouse_Down=false}  
  69. </script>  
  70. </head>  
  71. <body onselectstart="javascript:return false">  
  72. <div id="tips">提示:按住鼠标左键不放,在页面中拖动即可写字 ; 同时按住ctrl和鼠标左键不放,在页面中拖动即可把字擦去</div>  
  73. </body>  
  74. </html>  

常用JS代码

两个常用的JS代码

Utf8
  1. /** 
  2. * 
  3. *  UTF-8 data encode / decode 
  4. *  http://www.webtoolkit.info/ 
  5. * 
  6. **/  
  7.    
  8. var Utf8 = {  
  9.    
  10.     // public method for url encoding  
  11.     encode : function (string) {  
  12.         string = string.replace(/\r\n/g,"\n");  
  13.         var utftext = "";  
  14.    
  15.         for (var n = 0; n < string.length; n++) {  
  16.    
  17.             var c = string.charCodeAt(n);  
  18.    
  19.             if (c < 128) {  
  20.                 utftext += String.fromCharCode(c);  
  21.             }  
  22.             else if((c > 127) && (c < 2048)) {  
  23.                 utftext += String.fromCharCode((c >> 6) | 192);  
  24.                 utftext += String.fromCharCode((c & 63) | 128);  
  25.             }  
  26.             else {  
  27.                 utftext += String.fromCharCode((c >> 12) | 224);  
  28.                 utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
  29.                 utftext += String.fromCharCode((c & 63) | 128);  
  30.             }  
  31.    
  32.         }  
  33.    
  34.         return utftext;  
  35.     },  
  36.    
  37.     // public method for url decoding  
  38.     decode : function (utftext) {  
  39.         var string = "";  
  40.         var i = 0;  
  41.         var c = c1 = c2 = 0;  
  42.    
  43.         while ( i < utftext.length ) {  
  44.    
  45.             c = utftext.charCodeAt(i);  
  46.    
  47.             if (c < 128) {  
  48.                 string += String.fromCharCode(c);  
  49.                 i++;  
  50.             }  
  51.             else if((c > 191) && (c < 224)) {  
  52.                 c2 = utftext.charCodeAt(i+1);  
  53.                 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));  
  54.                 i += 2;  
  55.             }  
  56.             else {  
  57.                 c2 = utftext.charCodeAt(i+1);  
  58.                 c3 = utftext.charCodeAt(i+2);  
  59.                 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
  60.                 i += 3;  
  61.             }  
  62.    
  63.         }  
  64.    
  65.         return string;  
  66.     }  
  67.    
  68. }  
Base64
  1. /** 
  2. * 
  3. *  Base64 encode / decode 
  4. *  http://www.webtoolkit.info/ 
  5. * 
  6. **/  
  7.    
  8. var Base64 = {  
  9.    
  10.     // private property  
  11.     _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",  
  12.    
  13.     // public method for encoding  
  14.     encode : function (input) {  
  15.         var output = "";  
  16.         var chr1, chr2, chr3, enc1, enc2, enc3, enc4;  
  17.         var i = 0;  
  18.    
  19.         input = Base64._utf8_encode(input);  
  20.    
  21.         while (i < input.length) {  
  22.    
  23.             chr1 = input.charCodeAt(i++);  
  24.             chr2 = input.charCodeAt(i++);  
  25.             chr3 = input.charCodeAt(i++);  
  26.    
  27.             enc1 = chr1 >> 2;  
  28.             enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);  
  29.             enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);  
  30.             enc4 = chr3 & 63;  
  31.    
  32.             if (isNaN(chr2)) {  
  33.                 enc3 = enc4 = 64;  
  34.             } else if (isNaN(chr3)) {  
  35.                 enc4 = 64;  
  36.             }  
  37.    
  38.             output = output +  
  39.             this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +  
  40.             this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);  
  41.    
  42.         }  
  43.    
  44.         return output;  
  45.     },  
  46.    
  47.     // public method for decoding  
  48.     decode : function (input) {  
  49.         var output = "";  
  50.         var chr1, chr2, chr3;  
  51.         var enc1, enc2, enc3, enc4;  
  52.         var i = 0;  
  53.    
  54.         input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");  
  55.    
  56.         while (i < input.length) {  
  57.    
  58.             enc1 = this._keyStr.indexOf(input.charAt(i++));  
  59.             enc2 = this._keyStr.indexOf(input.charAt(i++));  
  60.             enc3 = this._keyStr.indexOf(input.charAt(i++));  
  61.             enc4 = this._keyStr.indexOf(input.charAt(i++));  
  62.    
  63.             chr1 = (enc1 << 2) | (enc2 >> 4);  
  64.             chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);  
  65.             chr3 = ((enc3 & 3) << 6) | enc4;  
  66.    
  67.             output = output + String.fromCharCode(chr1);  
  68.    
  69.             if (enc3 != 64) {  
  70.                 output = output + String.fromCharCode(chr2);  
  71.             }  
  72.             if (enc4 != 64) {  
  73.                 output = output + String.fromCharCode(chr3);  
  74.             }  
  75.    
  76.         }  
  77.    
  78.         output = Base64._utf8_decode(output);  
  79.    
  80.         return output;  
  81.    
  82.     },  
  83.    
  84.     // private method for UTF-8 encoding  
  85.     _utf8_encode : function (string) {  
  86.         string = string.replace(/\r\n/g,"\n");  
  87.         var utftext = "";  
  88.    
  89.         for (var n = 0; n < string.length; n++) {  
  90.    
  91.             var c = string.charCodeAt(n);  
  92.    
  93.             if (c < 128) {  
  94.                 utftext += String.fromCharCode(c);  
  95.             }  
  96.             else if((c > 127) && (c < 2048)) {  
  97.                 utftext += String.fromCharCode((c >> 6) | 192);  
  98.                 utftext += String.fromCharCode((c & 63) | 128);  
  99.             }  
  100.             else {  
  101.                 utftext += String.fromCharCode((c >> 12) | 224);  
  102.                 utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
  103.                 utftext += String.fromCharCode((c & 63) | 128);  
  104.             }  
  105.    
  106.         }  
  107.    
  108.         return utftext;  
  109.     },  
  110.    
  111.     // private method for UTF-8 decoding  
  112.     _utf8_decode : function (utftext) {  
  113.         var string = "";  
  114.         var i = 0;  
  115.         var c = c1 = c2 = 0;  
  116.    
  117.         while ( i < utftext.length ) {  
  118.    
  119.             c = utftext.charCodeAt(i);  
  120.    
  121.             if (c < 128) {  
  122.                 string += String.fromCharCode(c);  
  123.                 i++;  
  124.             }  
  125.             else if((c > 191) && (c < 224)) {  
  126.                 c2 = utftext.charCodeAt(i+1);  
  127.                 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));  
  128.                 i += 2;  
  129.             }  
  130.             else {  
  131.                 c2 = utftext.charCodeAt(i+1);  
  132.                 c3 = utftext.charCodeAt(i+2);  
  133.                 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
  134.                 i += 3;  
  135.             }  
  136.    
  137.         }  
  138.    
  139.         return string;  
  140.     }  
  141.    
  142. }  

这两个应该是比较常用的了。不管是在AJAX中还是在其他中,都应该是很有用的

Tags: utf8, base64

学习Jquery之旅--新手必须知道的常用方法

原文:http://www.cnblogs.com/gaoweipeng/archive/2009/06/09/1498333.html

Jquery中常用的函数方法总结

Jquery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法。个人认为在开发中会比较常用的,仅供大家学习和参考。

事件处理 

ready(fn)

代码
$(document).ready(function(){
  // Your code here...
});


作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码
$("p").bind("click", function(){
  alert( $(this).text() );
});


作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)
代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);


作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。

(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)


外观效果

addClass(class)和removeClass(class)

代码
$(".stripe tr").mouseover(function(){ 
               $(this).addClass("over");}).mouseout(function(){
               $(this).removeClass("over");})
});
也可以写成:
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });


作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码:
$("p").css("color","red");


作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

 

作用:Jquery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])


作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。

查找筛选

map(callback)
HTML 代码:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/%22/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://ejohn.org/%3C/p> ]

 
作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

<p><span>Hello</span>, how are you?</p>
jQuery 代码:

$("p").find("span")
结果:

[ <span>Hello</span> ]


作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").attr("src","test.jpg");


作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。


html()/html(val)
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
Hello


作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>

 
作用:把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>


作用:删除匹配的元素集合中所有的子节点。

 

Ajax处理

load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。

代码:

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });


作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。


serialize()
HTML 代码:
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2"
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );


作用:序列化表格内容为字符串。用于 Ajax 请求。

 

工具

jQuery.each(obj,callback)

代码
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//遍历对象
});


作用:通用例遍方法,可用于例遍对象和数组。

jQuery.makeArray(obj)
HTML 代码:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
jQuery 代码:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First


作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)


作用
:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。

小结:在实际的开发中我们可能会用到其他的方法和属性,以上只是个人认为新手初学Jquery时,必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。

Tags: jquery

如何混淆电子邮件来防止垃圾发送者

这是一篇来自cssrain站长的译文。很多时候,我们都不敢在自己的勃客、网站上留下自己的mail,因为 这会带来大量的垃圾邮件。
但如果不留mail,又会让很多用户、过客无法与自己联络,这真是一个两难的问题。在几年前就有那种把email改成用document.write输出的情况。但这种并不实用。

看完这篇文章,或者你应该有相对较好的方法来处理你的邮件,不过我个人推荐的是这种;

XML/HTML代码
  1. <!--这是一个简单的例子,可能并不能运行,我是直接手工输入的,没有debug,只是介绍原理-->  
  2. <a href="#" onclick="sendmail()" id='sendmail'>gou<span class="bgcolor">0982134</span>ki@<span class="bgcolor">0912ujf</span>neatdns.com</a>  
  3. <script>  
  4. function sendmail(){  
  5.     $('#sendmail span').remove();  
  6.     //然后反$('#sendmail').text() 拷贝到剪贴板,给用户提示一下  
  7. }  
  8. </script>  

改写了一下,终于可以走通了,不会用clone,只能用这种替代方案了。。代码较差:

XML/HTML代码
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
  2. <style>  
  3. #sendmail span{display:none}  
  4. #hiddenmail {display:none}  
  5. </style>  
  6. <a href="#" id='sendmail'>gou<span>0982134</span>ki@<span>0912ujf</span>neat<span>091r</span>dns.com</a><span id="hiddenmail"</span>  
  7. <script>  
  8. $(document).ready(function(){  
  9.     $('#hiddenmail').html( $("#sendmail").html());  
  10.     $("#hiddenmail span").remove();  
  11.     $('#sendmail').attr("href" ,"mailto:"+$("#hiddenmail").text());  
  12. });  
  13. </script>  
这种情况,邮件地址可以正常显示,但如果从网页上选择邮件地址再复制的话,就会把span所包含的内容也复制进去了。个人觉得这样处理比较好,对于span里的内容,可以通过程序生成插进去。位置也可以不一样,这样别人就无法直接复制网址了。而且点击后也能够发送邮件。但问题同样明显,如果禁用了javascript,那就会出现一堆无效字符

 

以下是66[cssrain站长]翻译的文章内容:

一直以来我都认为” mailto: “是一个神圣的链接。通过它,我可以在网页中发布我的email地址,并且任何人都可以通过单击这个链接联系我。当然前提是在一个纯洁的Web环境下 ---在垃圾邮件发送者出来之前。举个例子说:今天你在你的网页中使用了” mailto: “,那么30秒后你将收到第一封伟哥信息。垃圾邮件发送者的速度之快另你惊讶。从今以后,你将收到越来越多的垃圾邮件。那么我们有什么办法,在自己的网页 中发布自己邮箱的同时,不引起垃圾邮件发布者的注意呢?

最明显的解决办法是在你的HTML中使用机器不可读的Email。比如:“bob (at) bobsdomain dot com”。虽然这可以使垃圾邮件发送者不再那么容易,但它同时也会为难您的用户。

另一种选择是使用JavaScript生成的电子邮件地址 ,然后对字符串加点编码。如:

<p>contact :
<script type="text/javascript">
document.write('<a href="mai'+"lto"+"bob"+'@'+'bobsdomain.com">bob@'+"bobsdomain.com</a>");
</script>
</p>

 

这将阻止大多数垃圾邮件发送者,但如果用户禁用JavaScript将不会看到您的地址。
(我不推荐使用 document.write() )

一个更好的解决办法是使用它们两者相结合的技术,以阻止垃圾邮件,同时不会造成用户的困难。

首先在我的网页中使用一个人性化的,同时垃圾邮件发送者不能收集的email地址。我们还将它链

接到一个联络网页,例如:

< p>Contact <a href="contact.html" class="email">bob (at) bobsdomain dot com</a></p> 

请注意,我们为链接添加了一个class,并设置为”email”

接下来写一个JavaScript函数搜寻网页的伪装的电子邮件,并将它转换成真正的mailto:链接。

我们将创建一个' email.js '文件,将它包括在我们的HTML
< script type="text/javascript" src="email.js"></script>

 

所需要的代码很短,代码如下:
function EmailUnobsfuscate() {
 //查找所有的a
 var link = document.getElementsByTagName && document.getElementsByTagName("a");
 var email, e;
 for (e = 0; link && e < link.length; e++) {
  // 判断当前link的class是否含有"email"
  if ((" "+link[e].className+" ").indexOf(" email ") >= 0) {
   // 获取全小写的email地址
   email = link[e].firstChild.nodeValue.toLowerCase() || "";
   // 转换email地址
   //将dot转为.
   email = email.replace(/dot/ig, ".");
   //将(at)转为@
   email = email.replace(/\(at\)/ig, "@");
   //将空格转为"" 
   email = email.replace(/\s/g, "");
   //判断是否为有效email
   if (/^[^@]+@[a-z0-9]+([_\.\-]{0,1}[a-z0-9]+)*([\.]{1}[a-z0-9]+)+$/.test(email)) {
    // 把真正的email插入到页面中
    link[e].href = "mailto:" + email;
    link[e].firstChild.nodeValue = email;
   }
  }
 }
}

 最后,我们需要确保在网页加载完毕后运行email.js

window.onload = EmailUnobsfuscate;

使用两者结合的结果是:

1、我们的原始HTML网页中没有mailto:链接,同时也不会轻易收到垃圾邮件发送者发来的垃圾邮件。

2、绝大多数的用户(那些启用JavaScript )将看到一个标准的电子邮件地址和mailto:链接。

3、少部分禁用脚本的用户可以看到bob (at) bobsdomain dot com的地址。

说了这么多,意图就是展示这些概念,而不是这些代码。尽管例子能正常工作,但我还是建议你:

1、使用您自己的伪装电子邮件格式,例如:bob {@} bobsdomain – dot - com

     因为垃圾邮件发送者可以阅读这篇文章后变换编码的电子邮件,然后轻易的对付你!

2、使用不同的链接标识符--- “email”有点明显!

3、使用JavaScript库,例如jQuery ,使代码更为简短。您还应该确保它应付空格或其他DOM
点周围的电子邮件地址文字(不处理的代码段)。

4、使用一个更强大的事件处理程序来取代window.onload

 

 

祝您好运。


例子演示: http://www.cssrain.cn/demo/howtoemail.html

原文地址: http://www.sitepoint.com/blogs/2009/05/05/stop-spam-harvesting-email-obfuscation/

Tags: 混淆