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页面控制定时器运行的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

随机推荐