<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JerryQu的小站 &#187; 跨浏览器</title>
	<atom:link href="http://www.qgy18.com/tag/%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.qgy18.com</link>
	<description></description>
	<lastBuildDate>Tue, 16 Mar 2010 03:42:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>跨浏览器的“复制到剪贴板”.续</title>
		<link>http://www.qgy18.com/2009/08/clipboard2/</link>
		<comments>http://www.qgy18.com/2009/08/clipboard2/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 14:15:55 +0000</pubDate>
		<dc:creator>Jerry Qu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[跨浏览器]]></category>

		<guid isPermaLink="false">http://www.qgy18.com/?p=145</guid>
		<description><![CDATA[很早之前，写过一篇“跨浏览器“复制到剪贴板”的解决方案”，当时给出的解决方案是，IE使用window.clipboardData，firefox等其它浏览器使用flash来调用System.setClipboard方法。但是，随着Flash10安全策略更新，只允许在flash内部调用setClipboard方法，那篇文章给出的demo已经失效。我重新写了一个demo，见这里。 新demo是在flash内部调用的setClipboard方法，原则上安装了flash的浏览器都可以用... ]]></description>
			<content:encoded><![CDATA[<p>很早之前，写过一篇“<a href="http://www.qgy18.com/2008/08/clipboard/">跨浏览器“复制到剪贴板”的解决方案</a>”，当时给出的解决方案是，IE使用window.clipboardData，firefox等其它浏览器使用flash来调用System.setClipboard方法。但是，随着<a href="http://www.qgy18.com/2009/01/flash10%e5%ae%89%e5%85%a8%e7%ad%96%e7%95%a5%e6%9b%b4%e6%96%b0/">Flash10安全策略更新</a>，只允许在flash内部调用setClipboard方法，那篇文章给出的demo已经失效。我重新写了一个demo，<a href="http://www.qgy18.com/lab/clipboard2/">见这里</a>。</p>
<p>新demo是在flash内部调用的setClipboard方法，原则上安装了flash的浏览器都可以用；另外，IE7及以上版本用js调用clipboardData会弹出选择是否允许的提示，往往初级用户看到这样提示还以为网站有病毒，所以这次一视同仁所有浏览器都用flash写剪切板。原理比较简单，大概说一下：</p>
<ul>
<li>页面上提供两个js方法getData和copySuccess供flash调用，getData返回需要复制的内容，copySuccess是复制成功的回调函数；</li>
<li>往flash里添加一个任意的DisplayObject，例如TextField，注册Click事件，事件响应函数里先调用页面上的js方法getData得到粘贴内容，再用System.setClipboard写入剪切板，最后通知页面上的copySuccess。</li>
</ul>
<p>完整的代码<a href="http://www.qgy18.com/file/code/2.html">见这里</a>。如果要个性化提示文字，打开clipboard.as，修改后编译即可。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.qgy18.com/2009/08/clipboard2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>轻松去掉web中flash右键菜单</title>
		<link>http://www.qgy18.com/2009/04/noflashmenu/</link>
		<comments>http://www.qgy18.com/2009/04/noflashmenu/#comments</comments>
		<pubDate>Mon, 06 Apr 2009 16:43:11 +0000</pubDate>
		<dc:creator>Jerry Qu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[跨浏览器]]></category>

		<guid isPermaLink="false">http://www.qgy18.com/?p=107</guid>
		<description><![CDATA[今天无意中看到一个画面还不错的webgame，随手右键单击看是否用flash写的（我对flash的判断标准是看右键菜单有无About Adobe Flash Player&#8230;字样）,但是点了居然不出任何菜单。记得之前看到要完全干掉flash右键菜单要用到一些很WS的方法，不知道这个webgame怎么实现的。看了一下它的代码，原来是在flash父容器里做文章：firefox下阻止mousedown默认事件及事件传播；IE下给父容器setCaptu... ]]></description>
			<content:encoded><![CDATA[<p>今天无意中看到一个画面还不错的webgame，随手右键单击看是否用flash写的（我对flash的判断标准是看右键菜单有无About Adobe Flash Player&#8230;字样）,但是点了居然不出任何菜单。记得之前看到要完全干掉flash右键菜单要用到一些很WS的方法，不知道这个webgame怎么实现的。看了一下它的代码，原来是在flash父容器里做文章：firefox下阻止mousedown默认事件及事件传播；IE下给父容器setCapture。摘录核心代码稍加改造就是下面这个样子：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Green;">function</span><span style="color: Gray;"> </span><span style="color: Blue;">NoRightClick</span><span style="color: Olive;">(</span><span style="color: Blue;">pid</span><span style="color: Olive;">){</span><span style="color: #ffa500;">//pid:flash's parentNode id</span><span style="color: Gray;"><br />&nbsp;</span><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: Blue;">pid</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br />&nbsp;</span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">addEventListener</span><span style="color: Olive;">){</span><span style="color: Gray;"><br />&nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">addEventListener</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">mousedown</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span><span style="color: Gray;"><br />&nbsp;&nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">button</span><span style="color: Gray;"> == </span><span style="color: Maroon;">2</span><span style="color: Olive;">){</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">stopPropagation</span><span style="color: Olive;">()</span><span style="color: Gray;">; </span><span style="color: #ffa500;">//for firefox</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">preventDefault</span><span style="color: Olive;">()</span><span style="color: Gray;">;&nbsp; </span><span style="color: #ffa500;">//for chrome</span><span style="color: Gray;"><br />&nbsp;&nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;"><br />&nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span><span style="color: Green;">true</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br />&nbsp;</span><span style="color: Olive;">}</span><span style="color: Green;">else</span><span style="color: Olive;">{</span><span style="color: Gray;"><br />&nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">attachEvent</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">onmousedown</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"><br />&nbsp;&nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">button</span><span style="color: Gray;"> == </span><span style="color: Maroon;">2</span><span style="color: Olive;">){</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">setCapture</span><span style="color: Olive;">()</span><span style="color: Gray;">;<br />&nbsp;&nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;"><br />&nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;<br />&nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">attachEvent</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">onmouseup</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"><br />&nbsp;&nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">releaseCapture</span><span style="color: Olive;">()</span><span style="color: Gray;">;<br />&nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;<br />&nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">oncontextmenu</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span><span style="color: Gray;"><br />&nbsp;&nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;"> </span><span style="color: Green;">false</span><span style="color: Gray;">;<br />&nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;<br />&nbsp;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></div></div>
<div class="hl-surround"><div class="hl-main"><span style="color: Olive;">&lt;</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br />&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">testContent</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width:800px</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br />&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br />&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: Green;">script</span><span style="color: Gray;"> </span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br />&nbsp; var so = new SWFObject(&quot;test.swf&quot;, &quot;t1&quot;, &quot;800&quot;, &quot;550&quot;, &quot;9&quot;, &quot;#000000&quot;);<br />&nbsp; so.addParam(&quot;quality&quot;, &quot;high&quot;);<br />&nbsp; so.addParam(&quot;name&quot;, &quot;t1&quot;);<br />&nbsp; so.addParam(&quot;id&quot;, &quot;t1&quot;);<br />&nbsp; so.addParam(&quot;algin&quot;, &quot;middle&quot;);<br />&nbsp; so.addParam(&quot;AllowScriptAccess&quot;, &quot;sameDomain&quot;);<br />&nbsp; so.addParam(&quot;menu&quot;, &quot;false&quot;);<br />&nbsp; so.addParam(&quot;wmode&quot;, &quot;opaque&quot;);<br />&nbsp; so.addParam(&quot;pluginspage&quot;, &quot;http://www.adobe.com/go/getflashplayer&quot;);<br />&nbsp; so.write(&quot;testContent&quot;);<br />&nbsp;<br />&nbsp; NoRightClick(&quot;testContent&quot;);<br />&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;/</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></div></div>
<p>经过试验，该代码可以在IE、Firefox和Google Chrome里去掉flash的右键菜单，还是挺方便的。至于这样做有什么意义呢？我暂时还没有想到——但网上搜索一下，有这种需求的人还是不少的。</p>
<p><a href="http://www.qgy18.com/lab/noflashmenu/">演示地址</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.qgy18.com/2009/04/noflashmenu/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>跨浏览器“复制到剪贴板”的解决方案</title>
		<link>http://www.qgy18.com/2008/08/clipboard/</link>
		<comments>http://www.qgy18.com/2008/08/clipboard/#comments</comments>
		<pubDate>Sat, 09 Aug 2008 15:16:08 +0000</pubDate>
		<dc:creator>Jerry Qu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[跨浏览器]]></category>

		<guid isPermaLink="false">http://www.qgy18.com/?p=26</guid>
		<description><![CDATA[众所周知，firefox的安全性比较高，但是安全带来的弊端就是很多功能不支持。比如说在IE下可以通过脚本来设当前网页为首页，firefox却不行。今天要讨论的是另外一个问题：怎么在firefox等不支持window.clipboardData的浏览器下实现复制呢？ 首先，我们来看网易邮箱是怎么解决这个问题的。我们在firefox下进到写邮件页面，点击编辑器上的全部功能，然后点击左边的“复制”按钮，... ]]></description>
			<content:encoded><![CDATA[<p>众所周知，firefox的安全性比较高，但是安全带来的弊端就是很多功能不支持。比如说在IE下可以通过脚本来设当前网页为首页，firefox却不行。今天要讨论的是另外一个问题：怎么在firefox等不支持window.clipboardData的浏览器下实现复制呢？</p>
<p>首先，我们来看<a href="http://mail.163.com">网易邮箱</a>是怎么解决这个问题的。我们在firefox下进到写邮件页面，点击编辑器上的全部功能，然后点击左边的“复制”按钮，“您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成”，网易邮箱给了我们这么一个提示。我觉得这个解决方案可以得80分，因为它告诉了我们两个信息：其一，之所以复制操作没有完成是因为我的浏览器很安全，为了安全损失一点用户体验一般用户是可以接受的；其二，它还提示了我们可以通过键盘快捷键ctrl+c来完成操作，这对刚上网的新手来说很人性化。但是，有没有更好的解决方案呢？<span id="more-26"></span></p>
<p>网上大致有两种解决方案，一种是需要修改firefox配置，其实firefox也是支持复制的，但是<a href="http://hi.baidu.com/zhuang_yifan/blog/item/9d40d0ced706a50293457edc.html">需要到about:config里去手动开启</a>，这里不做介绍了；另外一种解决方案是本文要用到的flash。因为flash可以方便的把文字拷贝到系统剪切板中，所以我们利用flash来做跳板，只需要一行代码就能搞定：</p>
<p>System.setClipboard(clipboard);</p>
<p>这句代码的含义后面还会提到。有了这个swf的跳板，剩下的工作就简单了，如果浏览器不支持window.clipboardData，就在复制的时候把内容传给这个flash，就OK了，关键代码如下：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Green;">if</span><span style="color: Gray;"> </span><span style="color: Olive;">(</span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">clipboardData</span><span style="color: Olive;">){</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">clipboardData</span><span style="color: Gray;">.</span><span style="color: Blue;">setData</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">Text</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: Blue;">str</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Olive;">}</span><span style="color: Green;">else</span><span style="color: Olive;">{</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">flashId</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">_clipboard_</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp;</span><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">flashContent</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;embed src=&quot;clipboard.swf&quot; FlashVars=&quot;clipboard=</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span><span style="color: Blue;">str</span><span style="color: Gray;">.</span><span style="color: Blue;">replace</span><span style="color: Olive;">(</span><span style="color: #8b0000;">/</span><span style="color: Red;">\+</span><span style="color: #8b0000;">/g</span><span style="color: Gray;">,</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">%2b</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">+</span><span style="color: #8b0000;">'</span><span style="color: Red;">&quot; width=&quot;0&quot; height=&quot;0&quot; type=&quot;application/x-shockwave-flash&quot;&gt;&lt;/embed&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp;</span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: Blue;">flashId</span><span style="color: Olive;">)){</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">flash</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">createElement</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">div</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Blue;">flash</span><span style="color: Gray;">.</span><span style="color: Blue;">id</span><span style="color: Gray;"> = </span><span style="color: Blue;">flashId</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Blue;">flash</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> = </span><span style="color: Blue;">flashContent</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">body</span><span style="color: Gray;">.</span><span style="color: Blue;">appendChild</span><span style="color: Olive;">(</span><span style="color: Blue;">flash</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp;</span><span style="color: Olive;">}</span><span style="color: Green;">else</span><span style="color: Olive;">{</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: Blue;">flashId</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> = </span><span style="color: Blue;">flashContent</span><span style="color: Gray;">;<br />&nbsp;&nbsp; &nbsp;</span><span style="color: Olive;">}</span><span style="color: Gray;"><br /></span><span style="color: Olive;">}</span></div></div>
<p><a href="http://www.qgy18.com/lab/clipboard/">测试地址</a></p>
<p>adobe的文档中对setClipboard有如下解释：</p>
<blockquote>
<table class="detailHeader" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="detailHeaderName">setClipboard</td>
<td class="detailHeaderParens">()</td>
<td class="detailHeaderType">方法</td>
</tr>
</tbody>
</table>
<p><code>public static function setClipboard(string:<a href="http://www.ahwww.cn/study/ActionScript3/String.html">String</a>):<a href="http://www.ahwww.cn/study/ActionScript3/specialTypes.html#void">void</a></code></p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="white-space: nowrap;" valign="top"><strong> 语言版本 : </strong></td>
<td>ActionScript 3.0</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="white-space: nowrap;" valign="top"><strong> Player 版本 : </strong></td>
<td>Flash Player 9</td>
</tr>
</tbody>
</table>
<p>用指定的文本字符串替换剪贴板的内容。</p>
<p><strong>注意：</strong>出于安全方面的考虑，您无法读取系统剪贴板的内容。 换句话说，不存在相应的 <code>System.getClipboard()</code> 方法。</p>
<p><span class="label"> 参数 </span></p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="20"></td>
<td><code><span class="label">string</span>:<a href="http://www.ahwww.cn/study/ActionScript3/String.html">String</a></code> — 要放置在系统剪贴板上的纯文本字符串，用于替换系统剪贴板上的当前内容（如果有）。</td>
</tr>
</tbody>
</table>
</blockquote>
<p>由此可见，我们只能利用flash把文字复制到系统剪贴板中，而不能把系统剪切板中的内容拷贝出来。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.qgy18.com/2008/08/clipboard/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>跨浏览器的本地存储解决方案</title>
		<link>http://www.qgy18.com/2008/05/localstorage/</link>
		<comments>http://www.qgy18.com/2008/05/localstorage/#comments</comments>
		<pubDate>Fri, 30 May 2008 07:43:55 +0000</pubDate>
		<dc:creator>Jerry Qu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[本地存储]]></category>
		<category><![CDATA[跨浏览器]]></category>

		<guid isPermaLink="false">http://www.qgy18.com/?p=6</guid>
		<description><![CDATA[有时候我们在前端开发中为了提高用户体验，减少向服务器请求的次数，常常要在用户的电脑上存储数据，即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案。 1.针对IE6以上(含)内核的浏览器，我们可以使用UserData 行为（userData Behavior） 说明： userData 行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客... ]]></description>
			<content:encoded><![CDATA[<p>有时候我们在前端开发中为了提高用户体验，减少向服务器请求的次数，常常要在用户的电脑上存储数据，即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案。<span id="more-6"></span></p>
<p><strong>1.针对IE6以上(含)内核的浏览器，我们可以使用UserData 行为（userData Behavior）</strong></p>
<p><em><strong>说明：</strong></em></p>
<p>userData 行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。该数据将一直存在，除 非你人为删除或者用脚本设置了该数据的失效期。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData 存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。userData 行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。 一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。出于安全的考虑，相同协议使用同 一个文件夹保存UserData存储区数据。</p>
<p><strong><em>使用：</em></strong></p>
<p>（1）首先必须在行内或文档的head部分声明如下样式：</p>
<p>.userData {behavior:url(#default#userdata);}</p>
<p>或者使用如下js代码来声明：</p>
<p>document.documentElement.addBehavior(”#default#userdata”);</p>
<p>（2）成员：</p>
<p>expires 设置或取得使用userData行为保存数据的失效日期，使用方法：对象ID.expires = UTC格式的时间字符串；</p>
<p>getAttribute() 取得指定的属性值；</p>
<p>load(存储区名) 从userData存储区载入存储的对象数据；</p>
<p>removeAttribute() 删除指定的属性值；</p>
<p>save(存储区名) 将对象存储到一个userData存储区；</p>
<p>setAttribute() 设置指定的属性值；</p>
<p>XMLDocument 取得存储该对象数据的XML DOM引用</p>
<p>（3）示例：</p>
<p><code>document.documentElement.addBehavior("#default#userdata");</code></p>
<p><code>document.documentElement.load("t");</code></p>
<p><code>document.documentElement.setAttribute("value", "test");</code></p>
<p><code>document.documentElement.save("t");</code></p>
<p><strong>2.针对Firefox2</strong><strong>(含)</strong><strong>以上内核的浏览器，我们可以使用globalStorage</strong></p>
<p><em><strong>说明：</strong></em></p>
<p>This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).</p>
<p>Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we’d have the following storage object available to us:</p>
<p>globalStorage[’developer.mozilla.org’] &#8211; All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</p>
<div>
<p><strong><em>使用：</em></strong></p>
<p><code>globalStorage[location.hostname]["t"] = "test";//赋值</code></p>
<p><code>var ret = globalStorage[location.hostname]["t"];//取值</code></p>
<p><code>globalStorage.removeItem("t");//删除</code></p>
<p><strong><em>备注：</em></strong></p>
<p>在firefox2中，我们可以在test00.aa.test.com 上的页面内使用globalStorage[<span style="font-family: Lucida Sans Unicode;">“</span>test.com<span style="font-family: Lucida Sans Unicode;">“</span>][<span style="font-family: Lucida Sans Unicode;">“</span>t<span style="font-family: Lucida Sans Unicode;">“</span>]=<span style="font-family: Lucida Sans Unicode;">“</span>test<span style="font-family: Lucida Sans Unicode;">“</span>来赋值，但是到了firefox3这么做却会得到一个错误提示，原因是firefox3的安全策略要求在使用 globalStorage时，指定的域名和实际的域名必须严格匹配！</p>
<p><strong>3.Database Storage，HTML5里的内容，目前仅有Safari支持</strong></p>
<p><em><strong>说明：</strong></em></p>
<p><em>This section is non-normative.</em></p>
<p><em><strong>使用：</strong></em></p>
<p>init:function(){<br />
if(!this._inited){<br />
this._db.transaction(function(t){<br />
t.executeSql(&#8220;CREATE TABLE &#8220;+this.name+&#8221; (k TEXT UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL)&#8221;,[],function(){});<br />
},function(){});<br />
this._inited = true;<br />
}<br />
},<br />
get:function(key,fn){<br />
var ret = &#8220;&#8221;;<br />
this._db.transaction(function(t){<br />
t.executeSql(&#8220;SELECT v FROM &#8220;+this.name+&#8221; Where k=?&#8221;, [key], function(t, r){<br />
if(r.rows.length&gt;0){<br />
ret=r.rows.item(0)['v'];<br />
if(fn)fn.call(this,ret);};<br />
},function(){<br />
if(fn)fn.call(this,ret);<br />
});<br />
});<br />
},<br />
set:function(key,value){<br />
this.remove(key);<br />
this._db.transaction(function(t){<br />
t.executeSql(&#8220;INSERT INTO &#8220;+this.name+&#8221; (k,v) VALUES (?, ?)&#8221;, [key,value],function(){});<br />
},function(){});<br />
},<br />
remove:function(key){<br />
this._db.transaction(function(t){<br />
t.executeSql(&#8220;DELETE FROM &#8220;+this.name+&#8221; WHERE k=?&#8221;, [key],function(){});<br />
},function(){});<br />
}</p>
<p><strong>4.针对其它浏览器，如常见的Opera，我们可以使用Cookie</strong></p>
<p><em><strong>说明：</strong></em></p>
<p>A cookie is a small piece of information stored by the browser. Each cookie is stored in a name=value; pair called a crumb—that is, if the cookie name is “id” and you want to save the id’s value as “this”, the cookie would be saved as id=this. You can store up to 20 name=value pairs in a cookie, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.</p>
<p>Cookies accumulate each time the property is set. If you try to set more than one cookie with a single call to the property, only the first cookie in the list will be retained.</p>
<p>You can use the Microsoft® JScript® split method to extract a value stored in a cookie.</p>
<p><strong><em>使用：</em></strong></p>
<p><code>function SetCookie(sName, sValue){<br />
</code><code>var </code><code>date = new Date();<br />
document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();<br />
}<br />
function GetCookie(sName){<br />
var aCookie = document.cookie.split("; ");<br />
for (var i=0; i &lt; aCookie.length; i++){<br />
var aCrumb = aCookie[i].split("=");<br />
if (sName == aCrumb[0])<br />
return unescape(aCrumb[1]);<br />
}<br />
return null;<br />
}<br />
function DelCookie(sName){<br />
document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;";<br />
}</code></p>
<p><strong><em>备注：</em></strong></p>
<p>现代浏览器一般默认都支持cookie，但是使用cookie也有几个致命的弱点：存储的信息量太少，页面向服务器发送请求的同时cookie也会被发送，无形中浪费用户的带宽。</p>
<p><strong>5.其它解决方案</strong></p>
<p>Google Gear：Google开发出的一种本地存储技术；</p>
<p>Flash：利用Flash也可以实现本地存储</p>
<p>这两种方法的优点是：能支持所有的OS和浏览器(Google Gear目前仅支持IE5+和Firefox1.5+)；缺点是需要用户安装额外的插件，使用起来不如前面其它3种方法简便。</p>
<p><strong>6.一些链接</strong></p>
<p><a href="http://developer.mozilla.org/en/docs/DOM:Storage" target="_blank">DOM:Storage</a></p>
<p><a class="external text" title="http://en.wikipedia.org/wiki/HTTP_cookie" rel="nofollow" href="http://en.wikipedia.org/wiki/HTTP_cookie" target="_blank">HTTP cookies</a></p>
<p><a class="external text" title="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html" rel="nofollow" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html" target="_blank">Flash Local Storage</a></p>
<p><a class="external text" title="http://msdn2.microsoft.com/en-us/library/ms531424.aspx" rel="nofollow" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx" target="_blank">Internet Explorer userData behavior</a></p>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/#sql">http://www.whatwg.org/specs/web-apps/current-work/#sql</a></p>
<p><a title="by Rank Liu" href="http://www.never-online.net/blog/article.asp?id=219">safari的一些杂记</a></div>
]]></content:encoded>
			<wfw:commentRss>http://www.qgy18.com/2008/05/localstorage/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
