前几天做一个用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加载完毕再绑定事件可解决此问题。

iframe编程的一些问题的更多相关文章

  1. 【转】javascript面向对象编程

    摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...

  2. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  3. [小北De编程手记] : Lesson 07 - Selenium For C# 之 窗口处理

    在实际的自动化测试过程中,我们会遇见许多需要对窗口进行处理的情况.比如,点击删除某条信息的时候系统会显示一个Alert框.或者点击某个超链接时会在浏览器中打开一个新的页面.这一篇,来和大家分享一下Se ...

  4. http服务&ajax编程

    http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...

  5. html部分---表单、iframe、frameset及其他字符的用法(以及name、id、value的作用与区别);

    <form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...

  6. 对frameset、frame、iframe的js操作

    框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一 ...

  7. HTML---网页编程(2)

    前言 接着前面的HTML-网络编程1)来学习吧~~~ 色彩的表示 在计算机显示器中,使用红(red).绿(green).蓝(blue)3种颜色来构成各种各样的颜色.颜色的种类有16,256及65536 ...

  8. 2015第25周三iframe小结

    一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引 ...

  9. JavaScript异步编程

    前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...

随机推荐

  1. Qt for Mac 安装(包括PyQt)

    下载Qt: http://qt-project.org/downloads Qt5.2 for Mac:http://download.qt-project.org/official_releases ...

  2. Odoo 二次开发教程(四)-只读、唯一性验证和ORM方法介绍

    一.只读和唯一性验证 只读的设置有两种方法,一种是实在字段定义时设置为只读,第二种是在页面视图中进行设置. 接前例,我们将学生(tech.student)的名字name字段设置成只读. 方法一:字段定 ...

  3. 代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载

    Sublime Text这款代码编辑器是Jeff 一直都在使用的,前段时间转用到版本3,因为感觉Sublime Text 3 启动速度更加快,运行更加流畅——虽然3 还是在Beta 阶段.下面就直接分 ...

  4. 如何给GridView添加网格

    如何给gridview的单元格加上分割线 原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html ...

  5. jquery 购物车飞入效果

    github https://github.com/amibug/fly demo https://github.com/amibug/fly

  6. SQL——行值表达式(Row Value Expressions)

    概述 最近接触了一个新概念——行值表达式,也叫做行值构造器.这是一个很强大的SQL功能,通常我们所操作的SQL表达式都只能针对一行中的单一字段进行操作比较,而行值表达式可以针对一行中的多个字段进行操作 ...

  7. 使用 MimeKit 和 MailKit 发送邮件

    MimeKit 给.NET 社区带来了一流的 MIME 解析器,它能处理复杂的各种Mime, 性能好.而且开箱即用支持 S/MIME 和 PGP.MimeKit 和 MailKit 支持最新的国际化的 ...

  8. AngularJS SPA Template For Visual Studio

    单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...

  9. (C#)使用NPOI导出Excel

    在做业务型的软件时,经常需要将某些数据导出,本文介绍了在Winform或Asp.net中使用NPOI(POI 项目的 .NET 版本)来操作Excel文件,而无需安装Office. 首先,需要获取NP ...

  10. Eclipse 调试技巧

    条件断点 顾名思义,是指当发生某种情况或者触发某种条件的情况下命中断点.常用的情形就是for循环中某个变量为xx值的时候命中断点类似的. 做法1:在debug视图中,BreakPoint View将所 ...