专栏首页LIN_ZONEiframe 加载外部资源,显示隐藏loading,onload失效

iframe 加载外部资源,显示隐藏loading,onload失效

在项目中使用iframe 来加载外部资源,需要在iframe请求外部资源的时候,需要显示一个loading,在加载完成后,将这个loading隐藏掉,刚开始看到W3C中 iframe有一个 onload事件----该事件在iframe加载资源完成后就会触发,但是这个事件我试了试,发现触发不了,最在https://stackoverflow.com/questions/20572734/load-event-not-firing-when-iframe-is-loaded-in-chrome找到了有效的方法

解决办法如下:

1 <iframe class="html_area" src="http://www.baidu.com"></iframe>

设一个变量,var show_loading = true;   //这个变量为真表示loading显示,反之loading隐藏

然后 设一个计时器

var self = this
var html_iframe = document.getElementsByClassName('html_area')[0]
var interval = setInterval(function () {
    var iframeDoc = html_iframe.contentDocument || html_iframe.contentWindow.document;
    if(iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive'){
        self.show_iframe_loading = false
        clearInterval(interval)
    }
},500)

这样在刚开始请求的时候就显示loading,然后启动了计时器,每500ms检测一次,如果iframe内有内容的话,就将loading隐藏了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java基础---->Java的格式化输出

      在JavaSe5中,推出了C语言中printf()风格的格式化输出。这不仅使得控制输出的代码更加简单,同时也给与Java开发者对于输出格式与排列更大的控制能...

    lin_zone
  • ubuntu的apt-get install的默认安装路径(转)

    deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb或者直接双击此文件

    lin_zone
  • Vue 过滤器的使用

    lin_zone
  • 【Go 语言社区】iframe去边框,无边框,使用大全

    <iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″...

    李海彬
  • 【AI再创纪录】机器翻译提前7年达到人类专业翻译水平!

    【新智元导读】微软昨天宣布其研发的机器翻译系统首次在通用新闻的汉译英上达到了人类专业水平,实现了自然语言处理的又一里程碑突破。 由微软亚洲研究院与雷德蒙研究院的...

    新智元
  • 【Mate10炫AI】华为联手微软:手机机器翻译速度提升300% | 专访微软全球技术院士黄学东

    【新智元导读】 今天(10月20日),华为将在上海举行年度新品发布会,首次在国内发布 Mate10 相关产品。在慕尼黑的发布会上,我们看到了Mate 10 的诸...

    新智元
  • QT--QSocketNotifier类介绍

    QSocketNotifier 用来监听系统文件操作,将操作转换为Qt事件进入系统的消息循环队列。并调用预先设置的事件接受函数,处理事件。

    morixinguan
  • 给JavaScript的单个对象定义属性和属性的元数据

    Jerry Wang
  • 1 监听mysql表内容变化,mysql开启binlog

    binlog 就是binary log,二进制日志文件,这个文件记录了mysql所有的增、删、改语句。通过binlog日志我们可以做数据恢复,做主从复制等等。可...

    双面人
  • FFT(快速傅里叶变换)示例

    用户6021899

扫码关注云+社区

领取腾讯云代金券