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>