埋め込みタグの右クリックを無効にする方法は?
Aug 21 2020
実はユーザーがPDFをダウンロードするのは控えたいです。イベントリスナーを追加して無効にしてみました。
useEffect(() => {
let element = document.getElementById('pdf-div')
if(element)
element.addEventListener("contextmenu", (event: any) => event.preventDefault());
}, [])
return (
<>
{
file.includes('.png') ?
<img src={require(`./../../mocks/${file}`)} alt="" className='pdf-document-img' /> : <object id={'pdf-div'} ref={ref} className='pdf-document' data={`${file}#toolbar=0`} type="application/pdf">
<embed id={'pdf-div'} ref={ref} src={file} type="application/pdf" />
</object>
}
</>
);
回答
1 Ryan Aug 21 2020 at 18:30
最終的な目標が、ユーザーがPDFやその他のファイルをダウンロードしないようにすることである場合は、問題が発生します。
悪意のあるユーザーは、提供するファイルを取得する方法を少し知っています。彼らがそれを見ることができるならば、彼らはそれをダウンロードすることができます。Javascriptは、埋め込みの右クリックを妨げる可能性がありますが、ダウンロードを妨げることはありません。
とにかく、あなたの質問に答えるために。私が見ることができることから、ここには2つの即時オプションがあります。ユーザーがPDFだけでなく画像も右クリックするのを防ごうとしているようです。埋め込みは特に機能していません。
では、その時点で、ページの右クリックを完全に無効にしないのはなぜですか?
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg"/>
<h1>Test text</h1>
<p> Pure Javascript option to disable right-click on page entirely, rather than only on certain elements, etc </p>
それでもユーザーが右クリックできるようにしたい場合は、埋め込みPDFの場合は、ユーザーが代わりに右クリックする別の要素でユーザーを覆います。
これを行う方法の優れた例については、この質問を参照してください。Stack OverflowにPDFを埋め込むことはできないため、彼は例として画像を使用していますが、アイデアを得る必要があります。