プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScript、コピーを禁止する
JavaScript、右クリックを禁止する」の記事で、右クリック禁止のやり方を書きました。
次はJavaScriptでコピーを禁止するやり方を書いてみようと思います。

どーせ

<body oncopy="return false;">

とか書くだけだろ?
なんでわざわざ記事を分けたんだよ。
記事数稼ぎか?あぁん?!

というツッコミが聞こえてきそうですが、理由があるのです。
しょーもない理由が。

まず基本的なやり方自体は、右クリック禁止と同様で

<body oncopy="return false;">

だけでOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body oncopy="return false;">
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

とかそんなん。
ベントハンドラを拾って、そのイベントが起こったときは何もしない処理をさせています。

ここまでは良いのです。右クリック禁止と一緒です。
ここからが少し違います(--)b

JavaScriptを別出しにした書き方

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script type="text/javascript">
    <!--
        /* コピー禁止 */
        document.oncopy = function(e){
            return false;
        }
    // -->
    </script>


</head>
<body>
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

ですが、これがIE8で効きませんでした。
Firefox、Safari、Google Chrome、Operaの最新版では効いたのですけど、まーたIEの奴だよ。

結局あれやこれやと試行錯誤して

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script type="text/javascript">
    <!--
        /* コピー禁止 */
        window.onload = function() {
                document.body.oncopy = function () {
                    return false;
                }
        }
    // -->
    </script>

</head>
<body>
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

にしたら動きました。
他のブラウザでも動いたので、こっちが正しい書き方なのでしょうね。
ごめんなさい、IEさん。私の勉強不足でした。

同じように、jQueryを使った

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            /* コピー禁止 */
            $(document).bind("copy",function(e){
                return false;
            });
        })
    // -->
    </script>


</head>
<body>
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

という書き方も、IE8だけ効きませんでした。
やっぱりFirefox、Safari、Google Chrome、Operaの最新版では効いたのですけどね。
まーたIEの奴だよ。

こちらもあれやこれやと試行錯誤してみたのですが、結局原因は分からず。
最終的には妥協して

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            /* コピー禁止 */
            $(document).bind("copy selectstart",function(e){
                return false;
            });
        })
    // -->
    </script>

</head>
<body>
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

にしました。
「selectstart」がIE用に追加した部分で、選択を禁止しています。
「選択できなければコピーもできねーべ」ってな理屈です。

IEってcopyイベントをbindできねーの(--?
よく分かりませんが、jQueryを使ってコピペ禁止の処理を施すときはご注意ください。

ちなみに、本気を出してコピーを禁止するならCSSも使って

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            /* コピー禁止 */
            $(document).bind("copy selectstart mousedown",function(e){
                return false;
            });
        })
    // -->
    </script>

</head>
<body style="-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;">
    HTMLの中身1<br>
    HTMLの中身2<br>
    HTMLの中身3<br>
    HTMLの中身4<br>
    HTMLの中身5<br>
</body>
</html>

くらいはやる必要があるようです。

JavaScriptを無効にされたときの対処は「JavaScript、右クリックを禁止する」の下の方をご覧ください。

個人的にはコピペを禁止する意義ってあまり無い気がするのですけどね(-。-)ぼそっ

取りあえず、完了\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事