プレーンなJavaScriptで同意して遷移を実装

ほそぼそと保守している古いシステムで、一部の遷移に同意のアクションを追加したい、という要望をフロントサイドのみで対応してみた。本意はシステムのフローで規約を確認して同意する……、というプロセスの明確化のようなので、あえてサーバサイドを回収する必要性はないであろう……、と。本音はサーバサイドのプログラムまで改修するには、リスクが高すぎる、触らぬ神に祟りなし。
古いシステムなので動作を保証するブラウザも古い、かつ利用しているJSのライブラリも微妙……、なので拙いJS力で手探りに実装してみた。
エレガントさの欠片もない泥臭い実装だけど、IE6でもちゃんと動いたし、とりあえず良しとしておく。

<p class="center-text" id="doRegisterBox">
    <a href="http://www.example.com/create" id="doRegisterBtn"><img src="next.gif" alt="次に進む"  /></a>
</p>

<script type="text/javascript">
function initDoRegister() {
    var DO_REGISTER_BOX = 'doRegisterBox';
    var DO_REGISTER_BTM = 'doRegisterBtn';
    var CONSENT_TO_TEXT = '同意する';
    var CONSENT_TO_ID   = 'consentToCheck';
    var URL_VOID        = 'javascript:void(0);'
    var CONSENT_MESSAGE = '同意して次にすすんでください。';

    if (!document.getElementById) {
        return;
    };
    if (!document.createElement) {
        return;
    };
    if (!document.getElementsByTagName) {
        return;
    };
    if (!document.createTextNode) {
        return;
    };

    var box = (function () {
        var div = document.getElementById(DO_REGISTER_BOX);
        if (div) {
            var container = (function() {
                var div = document.createElement('DIV');
                if (div) {
                    var trigger = (function() {
                        var input = document.createElement('INPUT');
                        if (input) {
                            input.setAttribute('type', 'checkbox');
                            input.id = CONSENT_TO_ID;
                        };
                        return input;
                    }) ();
                    if (trigger) {
                        div.appendChild(trigger);
                    };
                    var text = document.createTextNode(CONSENT_TO_TEXT);
                    if (text) {
                        div.appendChild(text);
                    };
                };
                return div;
            }) ();
            var btn= document.getElementById(DO_REGISTER_BTN);
            div.insertBefore(container, btn);
        };
        return div;
    }) ();

    function checkAndGo(redirectTo) {
        var consent = document.getElementById(CONSENT_TO_ID);
        if (consent.checked) {
            location.href = redirectTo;
        } else {
            alert(CONSENT_MESSAGE);
        };
    };

    var elements = box.getElementsByTagName('A');
    for (var i = 0, l = elements.length; i < l; i++) {
        var link = elements[i];
        var href = link.href;
        if (link.addEventListener) {
            link.addEventListener('click', function() {
                checkAndGo(href);
                return false;
            }, true);
        } else if (link.attachEvent) {  
            link.attachEvent('onclick', function() {
                checkAndGo(href);
                return false;
            });
        };
        link.href = URL_VOID;
    };
};
(function(win) {
    if (win.addEventListener) {
        win.addEventListener('load', initDoRegister, false);
    } else if (win.attachEvent) {
        win.attachEvent('onload', initDoRegister);
    };
}) (this);
</script>