02月
25日

前端细节:跨浏览器点击界面按钮复制内容到剪贴板

类归于: 做东西 Hbomb 写于 15:53

YOHO!Adsence时,需要一个功能,就是复制内容到剪贴板,通常我们使用的复制到剪贴板的方法就是,采用:

1
 window.clipboardData.setData("Text", txt);

很不幸的是这个复制到剪贴板的方法,只是用于IE,而且如果是IE6新版本,或者IE7会弹出是否允许访问剪贴板的提示,这样一来用户体验就很不好了。特别对于那些非IE用户。于是,我在网上找了下,发现了以下跨浏览器实现的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
copyToClipboard = function(txt)
{
  if(window.clipboardData)
  {
     window.clipboardData.clearData();
     window.clipboardData.setData(”Text”, txt);
  }
  else if(navigator.userAgent.indexOf(”Opera”) != -1)
  {
    window.location = txt;
  }
  else if (window.netscape)
  {
    try
    {
      netscape.security.PrivilegeManager.enablePrivilege(”UniversalXPConnect”);
    }
    catch (e)
    {
      alert(”您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将signed.applets.codebase_principal_support’设置为true’之后重试”);
      return false;
    }
    var clip = Components.classes[@mozilla.org/widget/clipboard;1].createInstance(Components.interfaces.nsIClipboard);
    if (!clip)
      return;
    var trans = Components.classes[@mozilla.org/widget/transferable;1].createInstance(Components.interfaces.nsITransferable);
    if (!trans)
      return;
    trans.addDataFlavor(’text/unicode’);
    var str = new Object();
    var len = new Object();
    var str = Components.classes[@mozilla.org/supports-string;1].createInstance(Components.interfaces.nsISupportsString);
    var copytext = txt;
    str.data = copytext;
    trans.setTransferData(”text/unicode”,str,copytext.length*2);
    var clipid = Components.interfaces.nsIClipboard;
    if (!clip)
      return false;
    clip.setData(trans,null,clipid.kGlobalClipboard);
  }
}

但是这个办法,并不完美,在chrome和Safari下没法实现复制,而且在firefox下,修改fierfox配置才能支持该功能。所以采用纯JavaScript是无法完成该项任务,浏览器对于复制到剪切板出于安全考虑,都比较谨慎的给实现该功能设置了障碍。于是我继续寻找解决方案,之后看到了一个JavaScript借助flash的剪切板的版本,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function copy(inElement) 
{
  if (inElement.createTextRange) 
  {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
      range.execCommand('Copy');
  }
 else
 {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) 
    {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

as3的官方参考:

setClipboard () 方法

public static function setClipboard(string:String):void

语言版本 : ActionScript 3.0
Player 版本 : Flash Player 9

用指定的文本字符串替换剪贴板的内容。

注意:出于安全方面的考虑,您无法读取系统剪贴板的内容。 换句话说,不存在相应的 System.getClipboard() 方法。

参数

string:String — 要放置在系统剪贴板上的纯文本字符串,用于替换系统剪贴板上的当前内容(如果有)。

方法来源:http://www.jeffothy.com/weblog/clipboard-copy/

但是这个方法在fp9是可以适用的,但是在fp10之后,这个方法的由于fp10的安全机制的问题,导致不允许脚本去调用fp的as内部方法,于是这个方法在浏览器升级fp后,又是不可以通用了。这样就有了以下方法,人的聪明才知是无限的,既然fp10不允许外部脚本调as的内部方法,为何不反其道行之,采用内部方法调外部的内容能,于是就有了,之下的方法,原理是,在点击触发的dom结构上,蒙一层,这层是透明的flash,当用户点击这个dom结构时,其实同时也点击了这个flash,这样同样还是调setClipboard,而是内部事件触发的,这个方法zeroclipboard,这样就真真实现了跨浏览器的复制到剪贴板的功能。
测试页面如下:点击这里
现在YOHO!Adsense就是采用了这个方法。

02月
22日

YohoAdSence广告墙

类归于: 做东西 Hbomb 写于 09:58

通过3p/2w的努力YohoAdSence终于上线了,这个版本或许是beta版,欢迎大家多提意见什么的。
网站地址:yohoads.yoho.cn
我的博客做了一个广告墙页面:hbomb.name/wordpress/yoho-ad
别的不说了,大家去看看吧!

02月
22日

Javascript(Jscript)通过ActiveX来操作 Excel

类归于: 做东西 Hbomb 写于 09:47

偶家mm最近被工作上n多excel数据表的操作弄烦了,看的我心里不是滋味,总想帮助下,但是我对excel的宏操作也是菜鸟,最后想来还是使用Javascript来处理逻辑,然后通过ActiveX来操作Excel,基本原理是这样的:读取excel->js处理->输出excel。
js处理这边我就不说了,因为不是本文关注的重点。主要看下通过ActiveX的Excel操作,我主要用到,Excel.Application这个对象。其实查看文档Excel的操作Application、Workbook、Worksheet、Range这几个对象,分别是:Application对象表示整个应用程序,Worksheet对象标示工作表,Workbook对象表示包含Worksheet对象的一个集合,Range则主要用于单元格抽象表示的对象,用于处理单个单元格或成组的单元格。
在Jscrīpt中,通过ActiveXObject对象来启用并返回Automation对象的引用。不管是什么操作首先创建一个ActiveXObject对象。

1
2
var xlsApp = new ActicveXObject(“Excel.Application);
xlsApp .Visible = true;//使Excel可见的

首先看下读取操作:

1
2
3
4
5
6
var wb= xlsApp.Workbooks.open("C:\\temp.xls");//在本地打开一个xls文件。
var aSheet = wb.ActiveSheet;//获取当前的工作表,也可以选定打开哪个工作表,像:wb.Worksheets(1).select()
var rows=wb.aSheet .UsedRange.Cells.Rows.Count;//当前打开表的行数
var cols=wb.aSheet.UsedRange.Columns.Count;//当前打开表的列数
var value= oSheet.Cells(1,1).value;//获取第一行第一列的单元格的值
wb.close();//完成读取操作需要关闭当前的xls

写入Excel文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var xlBook = xlsApp.Workbooks.Add;//添加一个excel集(即一个xls文件)
var xlsheet = xlBook.Worksheets(1);//获取一个工作表
var rang = xlsheet.Cells(i,1).Value="xxx";//往工作表的单元格里添加值
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Interior.ColorIndex=5//设置单元格背景色为蓝色
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,6)).Font.ColorIndex=4;//设置字体色 
xlsheet.Rows(1).RowHeight = 25;//设置行高
xlsheet.Rows(1).Font.Size=14;//设置字体大小
xlsheet.Rows(1).Font.Name="黑体";//设置字体
xlsheet.Columns("A:D").ColumnWidth =18;//设置列宽
xlsheet.Columns(2).NumberFormatLocal="@";//设置显示字符而不是数字
 range.WrapText  =  true  ;//设置单元格内容自动换行
 range.HorizontalAlignment  =  Excel.XlHAlign.xlHAlignCenter;//设置单元格内容竖直堆砌方式
 range.VerticalAlignment=Excel.XlVAlign.xlVAlignCenter//设置单元格内容水平对齐方式
 range.WrapText  =  true;//设置单元格自动换行
xlsheet.Range(xlsheet.Cells(1,1),xlsheet.Cells(1,4)).mergecells=true;//合并单元格
xls.UserControl = true;  //很重要,不能省略,不然会出问题 意思是Excel交由用户控制
//以下是回收内存
xls=null;
xlBook=null;
xlsheet=null;

参考:

  • http://www.blogjava.net/fool/archive/2006/06/27/55285.html
  • http://www.itjj.net/softtest/tools/20080523/298118.html
  • http://www.javaeye.com/topic/3529
02月
16日

NextGEN Gallery 1.10 简体中文语言包【下载】

类归于: 做东西 Hbomb 写于 10:56

最新版的NextGEN Gallery 1.10没有简体中文的包,所以我就汉化下,大家有需要可以从下面下载。e文水平一般,如有错误的地方请指正。

1

nggallery-zh_cn语言包下载

02月
15日

控制网页背景音乐方法一二

类归于: 做东西 Hbomb 写于 04:00

前一阵子,要给yoho.cn的logo加声音彩蛋,我就重新看了下页面加声音方法,之前也看过比较有趣的一些做法。

再加上文宾提供的yahoo的flash叫声,基本上有两种:

  1. flash声音加载方式
  2. 先把声音文件导入flash,编译出连续播放的.swf文件。然后在页面里采用如下js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    //flash的HTML代码
    var sound_str='<object width="0" height="0" data="xxx.swf" type="application/x-shockwave-flash">
    <param name="id" value="wmsgsound" />
    <param name="quality" value="high" />
    <param name="loop" value="0" /><param name="src" value="xxx.swf" />
    <param name="name" value="wmsgsound" /></object>';
     
    //声音加载方法
    function load_sound()
    {
      var sound = document.createElement("span");
      sound.style.visibility = "hidden";
      sound.innerHTML = yodel_str;
      document.body.appendChild(sound);//把flash的HTML代码插入上面的span内
    };
    //页面触发
    document.getELementById("a").onclick=function()
    {
    load_sound();
    }

    这种方式,必须使用flash才行,还有注意flash的版本,不然IE的object标签会加载flash失败.

  3. embed声音加载方式
  4. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    //开始播放
    function startWav(uri)
    {
      stopWav();
      embedEl = document.createElement(”embed”);
      embedEl.setAttribute(”src”, uri);
      embedEl.setAttribute(”hidden”, true);
      embedEl.setAttribute(”autostart”, true);
      document.body.appendChild(embedEl);
    }
    //停止播放
    function stopWav()
    {
      if (embedEl) document.body.removeChild(embedEl);
        embedEl = null;
    }
    //页面触发
    document.getELementById("a").onclick=function()
    {
      startWav('a.wav');
    }

    这种方式,无需使用flash即可加载音频文件,但是用一个缺点,就是有时间的延迟,有一个加载音频文件的延迟,在

    http://softwareas.com/offline-sound-no-flash-no-file 有趣的JavaScript实现的节拍器(没有使用插件)有解决方案,就是把音频文件转成页面的文本编码,但是我试了下,在ie下加载不成功。

所以最后采用flash的方式来做的。
现在点击www.yoho.cn的logo会有叫声了。

02月
14日

超酷的《星际2》情人节桌面壁纸

类归于: 过日子 Hbomb 写于 14:24
  1. 三个族的壁纸,拼成心型

Terran Valentine

  1. 800 x 600
  2. 1024 x 768
  3. 1280 x 960
  4. 1280 x 1024
  5. 1600 x 1200
  6. 1680 x 1050
  7. 1920 x 1200

 

Zerg Valentine

  1. 800 x 600
  2. 1024 x 768
  3. 1280 x 960
  4. 1280 x 1024
  5. 1600 x 1200
  6. 1680 x 1050
  7. 1920 x 1200

 

Protoss Valentine

  1. 800 x 600
  2. 1024 x 768
  3. 1280 x 960
  4. 1280 x 1024
  5. 1600 x 1200
  6. 1680 x 1050
  7. 1920 x 1200

链接http://www.starcraft2.com/downloads.xml#wallpapers

02月
14日

n久,没有更新博客

类归于: 晒心情 Hbomb 写于 14:11

我想我是单线程的,忙完一件事,然后再忙另一件事,一个接一个,有时就会遗忘。不知道是不是代表人变老了。不过精力时常会分散到很多事情上,有的就顾及不到了。就像这个博客一样,老想往上面写点什么,但是到头来还是没有动过。

本来还想去参加 搜房的看房团的活动(说实话南京的房价也没有跌多少),主要因为偶家MM肚子不舒服,我也鼻子塞得厉害,都不通气,就买了个药,也不想出去走动了,这样就稍微有点时间,就想更新下博客了。一直想更新 wordpress到最新版本,这次索性更新到2.7.1的版本了。稍微调整了下关于我的布局,纠正了更新后一些显示的问题。然后现在就开始写写。再不写都要长草了。

happy_valentine_day