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 @   二师弟tl  阅读(404)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示