ブラウザをまたいでのコピー貼り付け

3159 ワード

ブラウザ

web開発ではしばしば「クリップボードにコピーする」機能を実現します.この機能は実用的ですが、安全上の問題により、ブラウザの制限が厳しくなり、実現の方法もますます限られてきました.FirefoxはデフォルトではJavascriptを通じて直接にクリップボードを操作することができません.関連の設定を開く必要があります.Javascript技術だけでブラウザを越えるカットボードを実現するのは無理です.今よく使われている方法はJavaScript+Flashを利用して実現します.clipboard.swfは海外で最初に実現されたものです.でも残念ですclipboard.swfは新出来のflash 10で無効です.flash 10ではswfで実際に操作したもの(マウスクリックなど)だけがクリップボードを起動すると規定されています.それに対してclipboard.swf方法のswfは隠れていて、JavaScriptを通じてflashのカットボードを操作して、明らかにswfに対して実際のユーザー操作を行っていません.
これに対して、最近海外で新しい方法が現れました.そして、JavaScriptライブラリhttp://www.jeffothy.com/weblog/clipboard-copy/を専門に作っています.flash映画とJavaScriptインターフェースが含まれています.このflashは透明で(非表示ではない)、ユーザーはその存在を気づかないです.このflashはDOM元素に覆われています.例えば、button、divなど、このDOMをクリックした時、実際にクリックしたのはこのflashです.この作用はflash上の動作でflashのクリップボードを開くことができます.これは実はclickjackingです.
DEMOページ:Zero Clip board
Zero Clip boardプロジェクトのホームページ:http://bowser.macminicolo.net/~jhuckaby/zroclipboard/
ネットで流行っているアリのお母さんの実の出所:http://code.google.com/p/zeroclipboard/
ゼロclipboard


<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>       by     </title>
        <script type="text/javascript" src="ZeroClipboard.js"></script>
        <script language="JavaScript">
            function get(id) { return document.getElementById(id); }
            function toClipboard(copy_id,input_id) {
                var clip = new ZeroClipboard.Client();
                clip.setHandCursor(true);
                clip.setText(get(input_id).value);		
                clip.addEventListener('complete', function (client) {
                    alert("Copy Ok!");
                });
                clip.glue(copy_id);
            }
        </script>
    </head>
    <body>
        <input type="text" id="input_text" />
        <input id="copy_button" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text')" />
        <br/>
        <input type="text" id="input_text2" />
        <input id="copy_button2" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text2')"/>
        <br/>
        <input type="text" id="input_text3" />
        <input id="copy_button3" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text3')"/>
    </body>
</html>

javascriptのundefinedとnullの違い