2014.
01.
26
14:55:53
Webサイトの右クリックを禁止したいとのご要望をいただきました。
気休めにしかなりませんが、気休めでも良いから入れたいのだそうです。
よーし！JavaScriptをゴリゴリ書くぞ～！と思って調べたら
だけで良いらしい。
とかそんなん。
の部分が「右クリックしちゃダメよ」の部分です。
理屈は、イベントハンドラを拾って、そのイベントが起こったときは何もしない処理をさせているだけです。
「HTMLにJavaScriptを混在させるなんて邪道だ！」というこだわり派な人は
とか分離させて書いてあげてください。
個人的には、jQueryを使って
のように書くのが好みです。
まぁどんな書き方でもJavaScriptを無効にされていると効かないですけどね。
回避策はJavaScriptを有効な状態で見てもらうことでしょうか。
気休めだけどお手軽な対処法は
のように、JavaScriptのコードからコンテンツを表示させてあげることです。
JavaScriptが無効の状態だとコンテンツが表示されないので一瞬ビックリすると思います。
ソース見ればすぐ分かるけど。
もう少し凝った書き方をするのであれば「$.ajax」を使って
のように、表示コンテンツをJavaScript上から取得して配置してあげます。
SEO的にどうなのか分かりませんが「JavaScriptを無効にしている奴には見せてやらない」は実現できますよ。
まぁ、ここまでやってもごにょごにょをごにょごにょされると右クリックできちゃうのですけどね。
切りがないので、ここら辺で妥協するのが良いと思います。
まとめると、
１．右クリック禁止はJavaScriptでできますよ
２．JavaScriptを無効にされていると効かないので、それ用の対処は必要ですよ
となります。
完了＼（－－）／
気休めにしかなりませんが、気休めでも良いから入れたいのだそうです。
よーし！JavaScriptをゴリゴリ書くぞ～！と思って調べたら
<body oncontextmenu="return false;">
だけで良いらしい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body oncontextmenu="return false;">
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body oncontextmenu="return false;">
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</html>
とかそんなん。
oncontextmenu="return false;"
の部分が「右クリックしちゃダメよ」の部分です。
理屈は、イベントハンドラを拾って、そのイベントが起こったときは何もしない処理をさせているだけです。
「HTMLにJavaScriptを混在させるなんて邪道だ！」というこだわり派な人は
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
/* 右クリック禁止 */
document.oncontextmenu = function(e){
return false;
}
// -->
</script>
</head>
<body>
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
/* 右クリック禁止 */
document.oncontextmenu = function(e){
return false;
}
// -->
</script>
</head>
<body>
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</html>
とか分離させて書いてあげてください。
個人的には、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("contextmenu",function(e){
return false;
});
})
// -->
</script>
</head>
<body>
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</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("contextmenu",function(e){
return false;
});
})
// -->
</script>
</head>
<body>
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</body>
</html>
のように書くのが好みです。
まぁどんな書き方でもJavaScriptを無効にされていると効かないですけどね。
回避策はJavaScriptを有効な状態で見てもらうことでしょうか。
気休めだけどお手軽な対処法は
<!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("contextmenu",function(e){
return false;
});
//コンテンツを表示
$("#disp_area").show();
})
// -->
</script>
</head>
<body>
<div id="disp_area" style="display:none">
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</div>
</body>
</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("contextmenu",function(e){
return false;
});
//コンテンツを表示
$("#disp_area").show();
})
// -->
</script>
</head>
<body>
<div id="disp_area" style="display:none">
HTMLの中身1<br>
HTMLの中身2<br>
HTMLの中身3<br>
HTMLの中身4<br>
HTMLの中身5<br>
</div>
</body>
</html>
のように、JavaScriptのコードからコンテンツを表示させてあげることです。
JavaScriptが無効の状態だとコンテンツが表示されないので一瞬ビックリすると思います。
ソース見ればすぐ分かるけど。
もう少し凝った書き方をするのであれば「$.ajax」を使って
<!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(){
//コンテンツを取得＆表示
//※「contents.html」の中身が実際に画面に表示するHTML
$.ajax({
url: "contents.html",
cache: false,
success: function(html){
$("#disp_area").html(html);
}
});
/* 右クリック禁止 */
$(document).bind("contextmenu",function(e){
return false;
});
})
// -->
</script>
</head>
<body>
<div id="disp_area"> </div>
</body>
</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(){
//コンテンツを取得＆表示
//※「contents.html」の中身が実際に画面に表示するHTML
$.ajax({
url: "contents.html",
cache: false,
success: function(html){
$("#disp_area").html(html);
}
});
/* 右クリック禁止 */
$(document).bind("contextmenu",function(e){
return false;
});
})
// -->
</script>
</head>
<body>
<div id="disp_area"> </div>
</body>
</html>
のように、表示コンテンツをJavaScript上から取得して配置してあげます。
SEO的にどうなのか分かりませんが「JavaScriptを無効にしている奴には見せてやらない」は実現できますよ。
まぁ、ここまでやってもごにょごにょをごにょごにょされると右クリックできちゃうのですけどね。
切りがないので、ここら辺で妥協するのが良いと思います。
まとめると、
１．右クリック禁止はJavaScriptでできますよ
２．JavaScriptを無効にされていると効かないので、それ用の対処は必要ですよ
となります。
完了＼（－－）／
category:● JavaScript thema:システム開発 - genre:コンピュータ Posted by ササキマコト