专栏首页前端杂货铺iframe编程的一些问题

iframe编程的一些问题

前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定

onclick事件都无效,而在页面中对iframe.contentDocument的onclick

属性为undefined;而当iframe去掉src属性后,在对其绑定onclick事件,该事件生效;

对比之下才发现原来当对iframe.contentDocument绑定事件时,iframe还没有加载

完毕,此时对于contentDocument虽然可以绑定该事件处理函数,但是却无法执行,

因为此时contentDocument为空页面,可以观察到此页面的url为 about:blank

        var f = document.createElement('iframe');
        f.src = '../promise/promise.html';
        document.body.appendChild(f)
        f.contentDocument.onclick = function(){console.log(123)}
        console.log(f.contentDocument.onclick)    

        f.onload = function(){
            f.contentDocument.onclick = function(){console.log(123)}
            console.log(f.contentDocument.onclick)
        }    

等待iframe加载完毕再绑定事件可解决此问题。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • node.js与ThreadLocal

    ThreadLocal变量的说法来自于Java,这是在多线程模型下出现并发问题的一种解决方案。 ThreadLocal变量作为线程内的局部变量,在多线程下可以...

    欲休
  • 深入seajs源码系列一

    简述         前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6...

    欲休
  • 响应式web布局中iframe的自适应

    困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

    欲休
  • 你大概走了假敏捷:认真说说敏捷的实现和问题(手绘版)

    今天你敏捷了没有?“敏捷”在互联网和软件开发领域从涓涓细流逐渐演变为行业潮流,往小了说是改进了开发方法,往大了说是革了瀑布流式的命——把产品开发引向了快速迭代、...

    薄玉桴
  • CODING 敏捷实战系列课第五讲:敏捷中国史

    大家好,今天我来为各位同学梳理一下敏捷进入中国的过程和发展。首先来看一下招商银行的一项数据。过去讲科技创新是一个很神秘的事情,不知道应该怎样去创新从而得到一个好...

    CODING研发管理系统
  • ​CODING 敏捷实战系列课第五讲:敏捷中国史

    大家好,今天我来为各位同学梳理一下敏捷进入中国的过程和发展。首先来看一下招商银行的一项数据。过去讲科技创新是一个很神秘的事情,不知道应该怎样去创新从而得到一个好...

    CODING研发管理系统
  • 中台之上(十):业务架构设计“笨重”,它能跟敏捷沾边吗?

    “天下武功唯快不破”。电影《功夫》中火云邪神这句台词可谓深得互联网时代竞争的要旨,也不乏业内人士常常感叹,一个产品的成功可能只是领先对手一周甚至两三天的上市时间...

    用户6900693
  • 开发成功、有价值产品的主航道

    2017.6.14, 深圳, Ken Fang 产品开发会失败, 而使企业陷入运营的危机, 不外乎两个主要的原因: @ 滥用敏捷 @ 将团队成员引導到...

    Ken Fang 方俊贤
  • 第 3 章 敏捷软件开发

    love丁酥酥
  • ​CODING 敏捷实战系列课第一讲:正本清源——敏捷的为什么

    我们可以思考一下,敏捷这一概念究竟存在了多久?如果追溯历史,我个人认为可能真的可以回归到远古的时代。进化论里的一个经典推断就是:物竞天择,适者生存。那么“唯一不...

    CODING研发管理系统

扫码关注云+社区

领取腾讯云代金券