Q&A
サイトの利用規約等でよくある、一定以上、もしくは規約の末文までスクロールをしないと、「次へ」ボタンが活性化しないような仕組みを実装したいと思っています。
ただし、規約部分の改定は容易に行えるよう、PDFとして準備を行い、そのPDFを差し替えるだけで更新を行えるようなフローにしたいと考えています。
そこで、HTMLのなかにiframeを用いて表示しているPDFのスクロール量を計測し、ボタンの活性、非活性の切り替えを行いたいのですが、このiframeで表示しているPDFのスクロール量を取得することができなく、困っています。
もしiframeで表示しているPDFのスクロール量が取得できないのであれば、大人しく規約用の別テンプレートを作り、それを使用するつもりですが、できる限りPDFで行いたいと思っており、ご教示いただければと思っております。
現在スクロールの取得で試しているコードは以下です。
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</head> 7<body> 8 <iframe src="./term.pdf" id="iframePDF"></iframe> 9</body> 10<script> 11 12 document.addEventListener('DOMContentLoaded', function () { 13 14 var iframe = document.getElementsByTagName('iframe') 15 16 document.addEventListener('DOMContentLoaded', function() { 17 iframe.addEventListener('load', (function (element) { 18 return function() { 19 element.contentWindow.addEventListener('scroll', onScroll); 20 }; 21 })(iframe, false)); 22 }, false); 23 24 function onScroll() { 25 console.log('on scroll !!'); 26 } 27 28 }); 29</script> 30</html>
以下の箇所をterm.htmlや、term.txtに変更した状態では、スクロール中の判定が取れているのは確認できています。
HTML
1<iframe src="./term.pdf" id="iframePDF"></iframe>
よろしくお願いいたします。
回答1件
0
目的のオブジェクトにたどり着いていないようなので、以下をお試しになってはいかがですか？
contentWindow プロパティは、<iframe> 要素 の Window オブジェクトを返します。
HTMLIFrameElement.contentWindow - Web API | MDN
動作の確認をしたわけではありませんが……
訂正
試してみましたが、iframeだけではなくて、embed要素のスクロールイベントも取れませんでした。置換要素の内部イベントは取得できないのかもしれません。
PDF.jsで、試してみたところ、こちらはスクロールイベントが発火し、scrollTopを参照することができましたので、お試しになってはいかがですか？
投稿2020/06/04 03:53
編集2020/06/04 04:53
総合スコア36912
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/04 03:54
2020/06/04 04:53
2020/06/05 04:09