layui多iframe页面控制定时器运行的方法
我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力。这些接口已经尽量优化,能放到缓存的都放到缓存。然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器。我觉得这是一个挺不错的提议,而且实现起来也不难。
粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法。第一种维护麻烦,难免有错漏的情况,而且和别的iframe有联系,不好。第二种逻辑判断简单,只和定时器所在iframe有关,虽然定时器一直在跑,不过只要里面的逻辑不执行就行,重要的是减少给服务器的压力。
那么怎么判断定时器所在页面是否隐藏呢?
获取iframe所在元素的父元素,判断是否有layui-show类就好了。
function myInterval(func, time){ console.log("启动定时器",func,time); //点击iframe对应的标签则直接执行定时器方法。不过注意,这里我默认只执行最后一个定时器方法,如果有多个定时器请自行更改。 top.$("li[lay-id='"+$(self.frameElement).attr("src")+"']").unbind('click').click(function(){ console.log(func,"方法调用"); func.call(); }); return setInterval(function(){ console.log("myInterval定时器调用"); if($(self.frameElement.parentElement).hasClass("layui-show")){ //判断所在的页面是否显示 console.log(func,"方法调用"); console.log("定时器间隔"+time); func.call(); } }, time); }
以上这篇layui多iframe页面控制定时器运行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial
-
layui弹出层按钮提交iframe表单的方法
如下所示: layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 type: 2, title:'添加人员信息', area: ['600px','340px'], btn: ['保存','关闭'], yes: function(index, layero){ var inputForm = $(window.frames["layui-layer-iframe" + index].document).contents().find(&quo
-
layui多iframe页面控制定时器运行的方法
我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力.这些接口已经尽量优化,能放到缓存的都放到缓存.然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器.我觉得这是一个挺不错的提议,而且实现起来也不难. 粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法.第一种维护麻烦,难免有错漏的情况,而且和别的iframe
-
JS修改iframe页面背景颜色的方法
本文实例讲述了JS修改iframe页面背景颜色的方法.分享给大家供大家参考.具体如下: 下面的代码演示了如何在网页里通过JS代码修改嵌入的iframe的网页背景颜色 <!DOCTYPE html> <html> <head> <script> function changeStyle() { var x=document.getElementById("myframe"); var y=(x.contentWindow || x.cont
-
safari,opera嵌入iframe页面cookie读取问题解决方法
查到原因是因为在这些浏览器中对第三方的cookie安全验证比较严格,需要确认是用户主动到第三方网站的,才能读到cookie,于是加个引导页面要用户点击下才能进入我们的组件. 1,首页 判断是否是这些浏览器,若是则去引导页面,其中reflag是判断是否已经去过引导页面.若已经引导过就不去引导页面了. 复制代码 代码如下: function safarireload() { var rehref=window.location.href; if(jQuery.browser.safari&&&
-
layui问题之自动滚动二级iframe页面到指定位置的方法
一.问题 前提:用的layui框架 目标:改变iframe页面滚动条位置 问题:没有麻溜溜的滚.. 二.经过 刚开始,以为只要滚动iframe里面的元素就行了,页面所有元素都在section里面,就通过section使滚动条滚动 $('section.layui-larry-box').scrollTop(300); 可想而知,不行 然后,又试了div啥的 最后直接试了包含这个页面的iframe标签,让iframe滚动 $(this).children('iframe').scrollTop(3
-
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
最近,在项目中使用到了layer.layer的弹层组件可以说是非常好用,layer 至今仍作为 layui 的代表作.在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互. 其实,官方文档都说的很清楚了. layui官方文档:http://layer.layui.com/ 使用版本:2.3.0 只是,需要我们耐心的读懂文档内容,然后根据自己的业务情况,实现自己想要的效果. 一.子页面获取父页面数据 子
-
Javscript调用iframe框架页面中函数的方法
本文实例讲述了在Javscript调用iframe框架页面中函数的方法,这个调用方法其实非常的简单,有了这个方法我们就可以实现iframe之间传值或修改值了,操作起来都非常的简单.分享给大家供大家参考.具体实现方法如下: 访问iframe里面的函数: 复制代码 代码如下: document.getElementById('commentIframe').contentWindow.hasLogined(); commentIframe为iframe的id. 要在 window.onload里面执
-
利用JQuery操作iframe父页面、子页面的元素和方法汇总
前言 iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录,这个使用纯JS也可以实现.下面话不多说了,来一起看看详细的介绍吧. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe
-
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
重点是阻止默认的刷新,这样外部页面就不刷新了,然后指定刷新iframe,我下面给出了思路 document.onkeypress = function(e){ if(e.keyCode == 116){ e.preventDefault(); //组织默认刷新 var iframeSrc = iframe.src; iframe.src = iframeSrc; } } iframe页面里再写如下: var iframeSrc = parent.iframe.src; document.onke
-
js实现iframe跨页面调用函数的方法
本文实例讲述了js实现iframe跨页面调用函数的方法.分享给大家供大家参考.具体实现方法如下: 在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent.html中含有IFrame并且IFrame指向child.html.现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法. 具体的代码实
-
嵌入式iframe子页面与父页面js通信的方法
本文实例讲述了嵌入式iframe子页面与父页面js通信的方法.分享给大家供大家参考.具体分析如下: iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信. 一.同域下父子页面的通信 父页面 parent.html: 复制代码 代码如下: <html> <head> <script type="text/javascr
随机推荐
- DedeCMS 核心类TypeLink.class.php摘要笔记
- FCKeditor 实战技巧
- Powershell实现监测服务器连通状态
- mytop 使用介绍 mysql实时监控工具
- 教你用Cordova打包Vue项目的方法
- PHP file_get_contents函数读取远程数据超时的解决方法
- python抓取网页中的图片示例
- webBrowser代理设置c#代码
- JavaScript循环_动力节点Java学院整理
- Python实现Linux下守护进程的编写方法
- JavaScript中检测变量是否存在遇到的一些问题
- php截取utf-8中文字符串乱码的解决方法
- 使用 GUID 值来作为数据库行标识讲解
- SQL 新增/修改 表字段列的类型等
- windows 2008 iis 提示401未授权 由于凭据无效,访问被拒绝
- winwebmail的技术问题应该从那儿入手?
- 通过一个小例子来简单理解C语言中的内存空间管理
- js手机号4位显示空格,银行卡每4位显示空格效果
- Android接收和发送短信处理
- Python3.6 Schedule模块定时任务(实例讲解)