类别‘JS/Ajax’的存档

页面复制的完美解决方案 (2011-4-17)

类别: JS/Ajax, Xhtml/Css | 962 Views| 3条评论

之前有发过一篇有关兼容浏览器页面复制的文章，很早就有朋友反应说在某些情况下无效，当时却还没有怎么注意，后来自己要用的时候发现的确是有问题，查了一下原因，原来是FLASH版本的问题。现在的浏览器中FLASH版本基本上都升到10了，在FLASH10中，要有实际的点击动作才能触发复制，所以原来那个是就无效了。

当然，解决办法还是有的，在这里介绍一个：zeroclipboard。同样也是利用FLASH来实现的，所以浏览器的兼容性是没有问题的。

另外，现在很多项目都会用到jquery，用的时候需要注意，尽可能用$(window).load()，因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了，会复制失效。对于用jquery框架的朋友，这里推荐一个专门针对jquery的版本：zClip。

一个挺酷的星级投票效果 (2010-2-9)

类别: JS/Ajax | 22,352 Views| 22条评论

先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。

这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种

star

感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：

提示：你可以先修改部分代码再运行。

这是用Jquery来写的，其中get_rate(88)就是分数，可以改变数值试试。提交的函数这里就没写了，只要在up_rate()里发个AJAX请求，取到返回值后再运行一下get_rate(rate)就OK了。

PS：刚才试了一下，点运行之后可能要刷新一下才看得到效果。

兼容浏览器的页面复制代码 (2010-1-1)

类别: JS/Ajax | 10,002 Views| 6条评论

关于此方法复制不成功的，请看这一篇：http://www.moondyzone.com/css/610.html

关于这个问题，目前网上大部分的代码都是只兼容IE的。因为之前实现这个功能都是用到了一个IE的控件。但前不久做一个任务的时候也碰到了这个需求，但是要全兼容，所以就找了一下，现在有了一种新的办法来解决这个问题，是通过一个FLASH来解决的。

原理其实很简单，是利用了AS3中的 System.setClipboard() 方法，因为是通过FLASH实现的，所以没有浏览器上的兼容性问题，用法如下：

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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<SCRIPT type=text/javascript>
 function copy(meintext) {
  if (window.clipboardData) {
      window.clipboardData.setData("Text", meintext)
  } 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(meintext)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
     document.getElementById(flashcopier).innerHTML = divinfo;
 }
 alert('地址已经复制到您的剪贴板！');
 }
</SCRIPT>
</head>
 
<body>
<input type="button" value="复制本文链接" onclick="javascript:copy(window.location.href);return false;" />
</body>
</html>

其中的 src=”_clipboard.swf” ，路径换成你自己的路径，文件下载如下：

clipboard.rar

使用动态scritp标签解决跨域读数据的问题 (2009-9-4)

类别: JS/Ajax | 3,708 Views| 4条评论

来到TX后第一个比较正式的任务就是做一个活动页面。页面就不说了，活动页面嘛，那个线条啊只能大块大块地切图了。然后就是因为数据量并不多，所以采用了用静态页然后通过JS去读数据的做法。然后就碰到了跨域的问题了。

我想肯定有很多朋友也会碰到这样的情况，对方只给出一个链接让你去取数据，通过传递不同的参数，返回不同的数据。如果是在本域的话，用AJAX是很方便的，但AJAX不能跨域。而iframe的方法也不实用，只能跨小域，还需要在双方页面加相应的函数，页面里多了那么一块也让人感觉不舒服。所以决定用动态script标签的方法来解决这个问题。

在这里想说一句，国内的业内环境真是…，网上查出来的技术文章几乎都是同样的几篇转来转去，而且也说得不清不楚的很费解。还是BI上环境好些，呵呵。下面的代码并非我原创，也是参考来的，但我一定讲解清楚，让每一个看这文章的人都能明白具体是如何实现的。

由于浏览器安全的问题，一些跨域的请求都会被拒绝，当然，你也可以设置为添加到信任站点就能访问，但你不可能要求你的每个用户都去这样添加。但是，也有个例外，JS是可以跨域的，比如说我们用jquery的时候，可以加载code.google.com里面的jquery包，同样也能应用到jquery的框架；再比如说一些流量统计的代码，都是加一段JS在页面，我们就能应用到写在里面的函数了。所以，当我们把我们所以跨域读取的地址写在script标签的src里的时候，不管是什么后缀名的文件，都会被当做一个JS来读取。所以呢，这个页面的输出要采用JS的格式。

在这里先说两点，第一是这个方法名字虽然是叫动态script标签，但是你静态地直接写在页面里也是可以的，前提是你不需要动态地传递参数；第二是在很多文章里会把此方法跟json扯上关系，其实这跟json没有任何关系，只是因为用json来处理某些返回值时比较方便罢了。下面还是用json格式的来说明好了，因为这样的应用可能会比较多一点。

首先我们新建一个页面，可以是ASP、PHP或者CGI，或者TXT也都可以，但是让他的输出像这样：

var MyJSON = {
   'info': [{'name' : 'moondy','sex' : '男','age' : '28'}]
};

这里定义了一个json，你也可以这样定义：

var name="moondy";
var sex="男";
var age="28";

喜欢怎样写就怎样写了，只是在有多组数据的时候，用json比较方便了。关键是要用var ，这样才能当做一个JS的变量来读取，此方法的主要思想，就是在你的页面动态地加入了一句变量的定义，而你就可以直接在JS中引用这个变量了。下面是JS部分：

var element = document.createElement("script");
function createScript(compId,dataId){        
        element.src = "http://www.moondyzone.com/json.php";//这里是你需要跨域读取的URL
        element.type = "text/javascript";
        element.language = "javascript";
}
function writeContent(){
        alert(MyJSON[0].name);//可以看到读取了相应的数据，json的操作跟数组类似了。这里就可以直接读取上面var定义的变量了。
}
window.onload = function(){
        createScript(1,2);//这里的这个参数是在需要动态传递参数的时候用的，本例中没有用到，看具体的需要了。
        document.getElementsByTagName("head")[0].appendChild(element);
}
if(document.all){
        element.onreadystatechange = function(){//IE用
                var state = element.readyState;
                if (state == "loaded" || state == "interactive" || state == "complete") {
                        writeContent();
                }
        };
} else {
        element.onload = function() {//FF用
                writeContent();
        };
}

在这里就没有做DEMO了，本人在实际项目中应用都没有问题的了。另外也可以跟据不同的需求进行修改，比如说例子中element.onreadystatechange 是在加载完成后运行，可以自行改为点击触发之类的也都可以咯。不过有一点要注意，动态改变外域的URL时需要刷新页面，直接重写script标签中的src在IE中会读不到。

迷你且高效的WEB编辑器——xheditor (2009-7-30)

类别: JS/Ajax | 3,325 Views| 6条评论

很久很久以前，我刚接触到这一行的时候，用的是一款名叫webedit的WEB在线编辑器。当时并不了解什么WEB标准，后来才发现在非IE的浏览器下都用不了。其实抛开兼容性的话，这一款还算是蛮不错的在线编辑器了。

再后来，就用到了所谓大名鼎鼎的FCK。FCK功能的确是不错，但我实在没法称赞它好用，他真的很难用，或者说是不适合中国人的使用习惯吧。像我们一些开发人员自己用还没什么，如果给客户做的程序用的是FCK，那么一个上传图片的模式就会搞得人摸不着头脑。

然后我不停地在找，终于碰到了一款近乎完美的WEB在线编辑器——xheditor。没有说它完美，因为它还有一个前提条件，是用jquery框架开发的。不过就算项目用的不是jquery框架，加上一个50K的JS包，它的体积还是非常小的，调用相当方便不像以前的那些需要插入一个iframe而是一个textarea就可以了，而且非常适合国人的使用习惯。详细介绍我这里就不写了，大家可以去谷歌代码上去看，他们的开发团队一直都有更新版本。
http://code.google.com/p/xheditor/
xheditor

JQuery LightBox Plugin (2009-7-13)

类别: JS/Ajax | 3,014 Views| 2条评论

说到lightbox，做这行的人应该都不陌生，想当年那牛逼哄哄的效果着实让我眼前一亮。不过原版的lightbox是用Prototype框架写的，但本民工只懂得少许的jquery，总不能同一个项目中用两个框架吧，还好牛人们已经做出了基于jquery的lightbox的插件了。其实wordpress里就有很多lightbox的插件，不过这东西可不是只用在博客里，还是整理一个能通用的吧。

jQuery lightBox 0.5,是当前最新的版本了，在这里本民工稍微修改了一下，去掉了点击时的虚线框，以及修改了有关中文的样式。

下载：jquery-lightbox-05.rar