auto refresh iframe 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script></script>
    <style>
        .gray {color:#ccc !important; background-color:#eee !important; border-color:#eee  !important;  }
        .black { color:black !important;  }
        #autoRefresh_label { cursor:pointer; }
    </style>
</head>
<body>
    <div id="autoRefresh_div"   style="-moz-user-select:none;" onselectstart="javascript:return false;">
        <input type="checkbox" checked="checked" id="autoRefresh_checkbox" />
        <label for="autoRefresh_checkbox" id="autoRefresh_label">
            每
                    <select id="autoRefresh_select">
                        <option value="1">1分钟</option>
                        <option value="3" selected="selected">3分钟</option>
                        <option value="10">10分钟</option>
                        <option value="30">30分钟</option>
                    </select>
            自动更新</label>
    </div>

    <script>
      
        window.$$ = function (e) {
            if (document.getElementById(e)) { return document.getElementById(e); }
        }


        //父子同域才可以使用
        //document.domain = '';如果父子同域后缀，则可以通过设置该属性而实现跨域访问

        window.autoRefresh = function () {
            this.getCurrentIframe = function () {
                if (!parent || parent.document.getElementsByTagName('iframe').length === 0) {
                    return undefined;
                }
                var iframes = parent.document.getElementsByTagName('iframe');
                for (var i = 0; i < iframes.length; i++) {
                    if (iframes[i].src === document.location.href) {
                        return iframes[i];
                    }
                }

            }

            var that = this;

            this.init = function () {


                if (!parent['autoRefresh_checkbox_checked']) {
                    parent['autoRefresh_checkbox_checked'] = $$('autoRefresh_checkbox').checked;
                }
                else {
                    $$('autoRefresh_checkbox').checked = parent['autoRefresh_checkbox_checked'];
                }

                $$('autoRefresh_checkbox').onchange = function () {
                    parent['autoRefresh_checkbox_checked'] = $$('autoRefresh_checkbox').checked;


                };
                $$('autoRefresh_checkbox').onclick = function () {

                    $$('autoRefresh_checkbox').checked === false
                                       ? $$('autoRefresh_select').className = $$('autoRefresh_label').className = 'gray'
                                       : $$('autoRefresh_select').className = $$('autoRefresh_label').className = 'black';
                }

                if (!parent['autoRefresh_select_selected']) {
                    parent['autoRefresh_select_selected'] = $$('autoRefresh_select').value;
                }
                else {
                    $$('autoRefresh_select').value = parent['autoRefresh_select_selected'];
                }
                $$('autoRefresh_select').onchange = function () {
                    parent['autoRefresh_select_selected'] = $$('autoRefresh_select').value;
                    this.start();
                };


            }

            this.start = function () {
                var time = parseInt($$('autoRefresh_select').value) * 1000 * 60;
                setInterval(function () {
                    if ($$('autoRefresh_checkbox').checked) {
                        that.getCurrentIframe().src = document.location.href;
                    }
                }, time);
            }

            this.init();
        }



        new autoRefresh().start();

    </script>
</body>

</html>


if you put these codes in the iframe,then iframe can refresh auto.

posted @ 2014-09-02 13:28  二师弟tl  阅读(404)  评论(0)  编辑  收藏  举报