質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

394閲覧

iframe内でのドラッグ&ドロップの禁止が出来ない

nekora

総合スコア501

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2023/10/12 07:06

実現したいこと

iframe内にドラッグした際に、ドラッグ&ドロップAPIでドロップ出来ないようにしたい

前提

・PHPでアップローダーを作っていまして、商品ごとに違うテーブルをiframe内に読み込んでいる
・ドラッグ&ドロップAPIでWindow全体をドロップ禁止にしており、スクロールバーも含めてドラッグしても禁止マークが付いたマウスカーソルになっている
・ファイルを受け付ける領域のみ、ドラッグ&ドロップAPIでドラッグとドロップを許可しているので、ここではコピーという文字のついたカーソルになっている
・iframeの領域にもドラッグ&ドロップAPIでドロップ禁止を設定している

発生している問題

iframe内にドラッグしてみるとAPIが効かなくて、コピーのついたカーソルになりドロップするとダウロ-ドウィンドウが別タブで開いてしまう

該当のソースコード

iframe_test.html
CODE Pen iframe_test.html

electronics.html
CODE Pen electronics.html

試したこと

読み込まれる側のHTMLにスクリプトで禁止してみましたが効果はありませんでした。

補足情報(FW/ツールのバージョンなど)

Windows10 64Bit Chrome最新版
尚、デスクトップ上に2つのファイルを置いて試すとクロスオリジンのエラーが出るので、諸先輩方には釈迦に説法でしょうが、ローカルサーバー等に上げて検証してみて下さい。

諸先輩方のお知恵を拝借できれば幸いです。m(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

iframeで読み込まれるファイルにもドラッグアンドドロップ禁止設定をすればいのでは?

//parent.html

javascript

1<script> 2document.addEventListener('dragover',e=>{ 3 e.dataTransfer.dropEffect = "none"; 4}); 5</script> 6parent 7<iframe width="100" height="100" src="child.html"></iframe>

//child.html

javascript

1<script> 2document.addEventListener('dragover',e=>{ 3 e.dataTransfer.dropEffect = "none"; 4}); 5</script> 6child

追記

メインページだけで制御したなら子windowのloadを待ってイベント制御する感じ

javascript

1const nodragover=doc=>doc.addEventListener('dragover',e=>e.dataTransfer.dropEffect = "none"); 2window.addEventListener('DOMContentLoaded', ()=>{ 3 nodragover(document); 4 document.querySelectorAll('iframe').forEach(x=>{ 5 x.addEventListener('load', ()=>{ 6 nodragover(x.contentDocument); 7 }); 8 }); 9});

修正版

※ブラウザ間の挙動の調整ができてませんでした

javascript

1<script> 2const nodragover=()=>{ 3 event.preventDefault(); 4 event.dataTransfer.dropEffect = "none"; 5} 6window.addEventListener('DOMContentLoaded', ()=>{ 7 document.querySelectorAll('iframe').forEach(x=>{ 8 x.contentDocument.addEventListener('dragover',nodragover); 9 x.addEventListener('load',()=>x.contentDocument.addEventListener('dragover',nodragover)); 10 }); 11}); 12document.addEventListener('dragover',nodragover); 13 14</script> 15<iframe></iframe> 16<iframe></iframe> 17<iframe></iframe>

投稿2023/10/12 07:44

編集2023/10/13 04:54
yambejp

総合スコア115286

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekora

2023/10/13 01:57

アドバイスありがとうございます。m(_ _)m 両方試してみたのですが、やはりiframeに入った時、コピーになってしまいます。 alertを仕込んでみましたが、どうやら、iframeに入った時イベントが発火していないようでした。
yambejp

2023/10/13 04:59

ブラウザの誤差を調整してませんでした
guest

0

自己解決

自己解決しました(正確にはyambejpさんの回答を受けてググるキーワードを変えて自己解決しました)

参考にしたページ Javascript(jQuery)でiframe内のイベントを親フレームで取得する

JavaScript

1<script> 2 window.addEventListener("load", function(e) { 3 var iframeContents = document.getElementById("targetHTML"); 4 iframeContents.contentWindow.addEventListener('dragstart dragenter dragover', function (e) { 5 alert("iframeへの侵入を検知しました"); 6 e.stopPropagation(); 7 e.preventDefault(); 8 e.originalEvent.dataTransfer.dropEffect = 'none'; 9 }); 10 }); 11</script>

この部分のコードを⇓のように変えたら成功しました。

jQuery

1<script> 2 jQuery(function ($) { 3 // 子フレームのイベント 4 $('#targetHTML').on('load', function (e) { 5 $(this).contents().on('dragstart dragenter dragover', function(e) { 6 // console.log('マウスが入ってきた!'); 7 e.stopPropagation(); 8 e.preventDefault(); 9 10 e.originalEvent.dataTransfer.dropEffect = 'none'; 11 }); 12 }); 13 }); 14</script>

やってることは、一緒のような気がしますが、jQueryで書くとうまくいきました
諸先輩方、貴重なアドバイスありがとうございました。m(_ _)m

投稿2023/10/13 04:16

nekora

総合スコア501

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問