1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iframe内のスクロール量とラジオボタンの活性制御を連動させる

Last updated at Posted at 2020-01-31

iframeで表示したテキストファイルのスクロール量とラジオボタンの活性制御を連動させる

 利用規約なんかでよくある、「ちゃんと最後までスクロールしないと【同意する】にチェックできないよ!」的なものを作ったので備忘録として。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample page</title>
  </head>
  <body>
    <iframe id="iframeTxt" src="/images/textfile.txt"></iframe>
    <input type="radio" name="agreeOrNot" value="1">はい
    <input type="radio" name="agreeOrNot" value="0" checked="checked">いいえ
    <input type="hidden" id="radioCtlFlg" value="0">
  <script>
    var iframe = document.getElementById("iframeTxt");
    var radio = document.getElementsByName("agreeOrNot");
    var radioCtl = document.getElementById("radioCtlFlg");

    // スクロール量チェック
    function textReadChk() {
        // 既読判定
        if (radioCtl.value == "1") {
            return;
        }

        // テキスト全体の高さ
        var scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
        // スクロール量
        var scrollAmount = iframe.contentWindow.pageYOffset;
        // ウィンドウ(表示される枠)の高さ
        var windowHeight = iframe.contentWindow.innerHeight;

        if (scrollAmount + windowHeight === scrollHeight) {
            for (i = 0; i < radio.length; i++) {
                radio[i].disabled = false;
            }
            radioCtl.value = "1"
        }
    }

    // iframe内のscrollイベントを親フレームで取得し、チェック呼び出し
    document.addEventListener('DOMContentLoaded', function() {
        iframe.addEventListener('load', (function(element) {
            return function() {
                element.contentWindow.addEventListener('scroll', textReadChk);
            };
        })(iframe, false);
    }, false);
  </script>
  </body>
</html>

参考にさせていただいたサイト

Javascript(jQuery)でiframe内のイベントを親フレームで取得する:綺麗に死ぬITエンジニア

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?