Q&A
前提・実現したいこと
YouTubeなど外部サイトをiframeで埋め込んでいます。
このiframe上のスワイプを検知したいです。
発生している問題・エラーメッセージ
iframe上ではスワイプが検知できません。（クロスドメイン制約のせい？）
該当のソースコード
スワイプを検出するコードとしては間違ってないように思えます。問題はiframeのクロスドメイン制約のせいでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>iframe上でスワイプを検知する方法</title> 7 8 <!-- 【試したこと（CSSでスワイプ機能の確認）】をここに記載 --> 9 10 <script> 11 var startY = null; 12 var endY = null; 13 14 // スワイプ／フリック 15 $(document).on('touchmove','.outer', function(ev){ 16 ev.preventDefault(); 17 endY = ev.touches[0].pageY; 18 }); 19 20 // タッチ開始 21 $(document).on('touchstart','.outer', function(ev){ 22 ev.preventDefault(); 23 startY = ev.touches[0].pageY; 24 }); 25 26 // タッチ終了 27 $(document).on('touchend','.outer', function(ev){ 28 ev.preventDefault(); 29 if( 0 < (endY - startY) ) { 30 console.log("下にスワイプされました"); 31 } 32 }); 33 </script> 34</head> 35<body> 36<h1>iframe上でスワイプを検知する方法</h1> 37<section class="outer"> 38 <iframe src="https://www.youtube.com/embed/5LC0qA5wczw"></iframe> 39</section> 40</body> 41</html>
試したこと（CSSでスワイプ機能の確認）
スワイプ範囲を、
・iframe部分
・その外側（padding: 50px;のpink）の部分
に分けて実行すると、このpinkの部分は下にスワイプされましたのコンソールが出ました。
つまりiframe上でのみ機能しないのだと思います。
html
1 <style> 2 .outer { 3 min-width: 100vw; 4 min-height: 300px; 5 padding: 50px; 6 background: pink; 7 } 8 </style>
試したこと（JSでスワイプ要素を指定）
あとは、iframe部分を対象とすべく、
$(document).on('touchmove','.outer', function(ev){
↓
$(document).on('touchmove','.outer > iframe', function(ev){
にしてもダメでした。
補足情報（FW/ツールのバージョンなど）
JavaScrpt,jQueryでお願いできましたら幸いです。
宜しくお願い致します。
回答1件
0
以下の回答が参考になるのではないでしょうか。
投稿2021/03/10 08:53
総合スコア374
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。