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

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エンジニア