Posts Tagged ‘跨浏览器’
很早之前，写过一篇“跨浏览器“复制到剪贴板”的解决方案”，当时给出的解决方案是，IE使用window.clipboardData，firefox等其它浏览器使用flash来调用System.setClipboard方法。但是，随着Flash10安全策略更新，只允许在flash内部调用setClipboard方法，那篇文章给出的demo已经失效。我重新写了一个demo，见这里。
新demo是在flash内部调用的setClipboard方法，原则上安装了flash的浏览器都可以用；另外，IE7及以上版本用js调用clipboardData会弹出选择是否允许的提示，往往初级用户看到这样提示还以为网站有病毒，所以这次一视同仁所有浏览器都用flash写剪切板。原理比较简单，大概说一下：
- 页面上提供两个js方法getData和copySuccess供flash调用，getData返回需要复制的内容，copySuccess是复制成功的回调函数；
- 往flash里添加一个任意的DisplayObject，例如TextField，注册Click事件，事件响应函数里先调用页面上的js方法getData得到粘贴内容，再用System.setClipboard写入剪切板，最后通知页面上的copySuccess。
完整的代码见这里。如果要个性化提示文字，打开clipboard.as，修改后编译即可。
本文链接：http://www.imququ.com/post/38.html
--EOF--
- No Comments
- Tags: Flash, 用户体验, 跨浏览器
今天无意中看到一个画面还不错的webgame，随手右键单击看是否用flash写的（我对flash的判断标准是看右键菜单有无About Adobe Flash Player…字样）,但是点了居然不出任何菜单。记得之前看到要完全干掉flash右键菜单要用到一些很WS的方法，不知道这个webgame怎么实现的。看了一下它的代码，原来是在flash父容器里做文章：firefox下阻止mousedown默认事件及事件传播；IE下给父容器setCapture。摘录核心代码稍加改造就是下面这个样子：
function NoRightClick(pid){//pid:flash's parentNode id
var el = document.getElementById(pid);
if(el.addEventListener){
el.addEventListener("mousedown",function(event){
if(event.button == 2){
event.stopPropagation(); //for firefox
event.preventDefault(); //for chrome
}
},true);
}else{
el.attachEvent("onmousedown",function(){
if(event.button == 2){
el.setCapture();
}
});
el.attachEvent("onmouseup",function(){
el.releaseCapture();
});
el.oncontextmenu = function(){
return false;
};
}
};
<body>
<div id="testContent" style="width:800px">
</div>
<script type="text/javascript">
var so = new SWFObject("test.swf", "t1", "800", "550", "9", "#000000");
so.addParam("quality", "high");
so.addParam("name", "t1");
so.addParam("id", "t1");
so.addParam("algin", "middle");
so.addParam("AllowScriptAccess", "sameDomain");
so.addParam("menu", "false");
so.addParam("wmode", "opaque");
so.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
so.write("testContent");
NoRightClick("testContent");
</script>
</body> 经过试验，该代码可以在IE、Firefox和Google Chrome里去掉flash的右键菜单，还是挺方便的。至于这样做有什么意义呢？我暂时还没有想到——但网上搜索一下，有这种需求的人还是不少的。
本文链接：http://www.imququ.com/post/42.html
--EOF--
- No Comments
- Tags: Flash, 跨浏览器
众所周知，firefox的安全性比较高，但是安全带来的弊端就是很多功能不支持。比如说在IE下可以通过脚本来设当前网页为首页，firefox却不行。今天要讨论的是另外一个问题：怎么在firefox等不支持window.clipboardData的浏览器下实现复制呢？
首先，我们来看网易邮箱是怎么解决这个问题的。我们在firefox下进到写邮件页面，点击编辑器上的全部功能，然后点击左边的“复制”按钮，“您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl C)来完成”，网易邮箱给了我们这么一个提示。我觉得这个解决方案可以得80分，因为它告诉了我们两个信息：其一，之所以复制操作没有完成是因为我的浏览器很安全，为了安全损失一点用户体验一般用户是可以接受的；其二，它还提示了我们可以通过键盘快捷键ctrl c来完成操作，这对刚上网的新手来说很人性化。但是，有没有更好的解决方案呢？
网上大致有两种解决方案，一种是需要修改firefox配置，其实firefox也是支持复制的，但是需要到about:config里去手动开启，这里不做介绍了；另外一种解决方案是本文要用到的flash。因为flash可以方便的把文字拷贝到系统剪切板中，所以我们利用flash来做跳板，只需要一行代码就能搞定：
System.setClipboard(clipboard);
这句代码的含义后面还会提到。有了这个swf的跳板，剩下的工作就简单了，如果浏览器不支持window.clipboardData，就在复制的时候把内容传给这个flash，就OK了，关键代码如下：
if (window.clipboardData){
window.clipboardData.setData("Text",str);
}else{
var flashId = '_clipboard_';
var flashContent = '<embed src="clipboard.swf" FlashVars="clipboard=' str.replace(/\ /g,"+") '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
if(!document.getElementById(flashId)){
var flash = document.createElement("div");
flash.id = flashId;
flash.innerHTML = flashContent;
document.body.appendChild(flash);
}else{
document.getElementById(flashId).innerHTML = flashContent;
}
} adobe的文档中对setClipboard有如下解释：
setClipboard () 方法
public static function setClipboard(string:String):void
语言版本 : ActionScript 3.0
Player 版本 : Flash Player 9 用指定的文本字符串替换剪贴板的内容。
注意：出于安全方面的考虑，您无法读取系统剪贴板的内容。 换句话说，不存在相应的
System.getClipboard()方法。参数
string:String— 要放置在系统剪贴板上的纯文本字符串，用于替换系统剪贴板上的当前内容（如果有）。
由此可见，我们只能利用flash把文字复制到系统剪贴板中，而不能把系统剪切板中的内容拷贝出来。
本文链接：http://www.imququ.com/post/61.html
--EOF--
- (1) Comments
- Tags: Flash, JavaScript, 用户体验, 跨浏览器
- Entries (RSS)
- PPanda sftp如何同步本地文件夹呢？
- dron 嗯！太有用了，终于完美找回 EditPlus 的感觉了。
- 袁源 还真的是这样。其实挺佩服微软的呀～就是都太不完善了
- 三水清 类似功能可以使用fiddler，http://ming.sinaapp.com/?p=218
- 呆呆 非常感谢~话说我现在想把weinre变成一个服务器，就是我在电脑上修改了，手机上访问可以直接，不知道[...]
- 夜 困扰了我好几天的问题，不过最后还是让我解决了，要早让我看见这个文章该多好啊，那我也不用烦恼那么久了~[...]
- hoowolf 非常感谢你的工作！！！
- welefen 恩，去年我们在新首页导航精准下线的时候也遇到过，当时还做了对用户影响的数据评估和分析。
- 唠叨下 我们这边测试的时候是在刚做完 preload 后的系统上测试的，就跟刚装完操作系统后一样干净。怎么说[...]
- gust 我是在ubuntu11.10环境下
- gust 想用google浏览器的话可以这样 webbrowser.get('/usr/bin/google[...]
- jin 怎么zenCoding的缩写设置呢，类似editplus下的acp配置
- Jerry Qu @Feather，确实Shadow是基于Weinre封装的。在我这里也很慢，因为它连的是http:/[...]
- Feather 谢谢分享，其实Adobe的Shadow产品貌似也是用这个原理来做的，不过shadow封装好，比较方便[...]
- i am bug 感谢屈屈！