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加载完毕再绑定事件可解决此问题。

时间: 2024-11-05 16:01:23

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

爬虫概念与编程学习之如何爬取视频网站页面(用HttpClient)(二)

先看,前一期博客,理清好思路. 爬虫概念与编程学习之如何爬取网页源代码(一) 不多说,直接上代码. 编写代码 运行 <!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta http-equiv="Content-Type" content="text/html; c

框架编程概述 (转载)

框架编程概述 http://blog.chinaunix.net/u2/65993/showart_576137.html一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:win

2015第25周三iframe小结

一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象.链接对象.图片对象等是类似的,不同的是,这些集合是doc

CRUD全栈式编程架构之界面层的设计

Layout的设计 模板模式 mvc的模板特别类似设计模式中模板方法模式,结合Layout中RenderSection和RenderBody方法可以将部分html展现逻辑延迟到具体的视图页面去实现里面实现.结合我们增删改查的逻辑,我们的用户界面,我们将页面分为这几个区域,实现部分逻辑以后,部分留给具体的页面去实现.例如图片中新增,编辑,删除,导入,导出,查询都是架构自带的操作,至于复制就给页面扩展,查询条件也留给具体的页面中扩展,模板中给出RenderSection即可. 执行顺序 这个执行顺序

Servlet 3.0笔记之异步请求Comet推送iFrame示范

Servlet3规范提出异步请求,绝对是一巨大历史进步.之前各自应用服务器厂商纷纷推出自己的异步请求实现(或者称comet,或者服务器推送支持,或者长连接),诸如Tomcat6中的NIO连接协议支持,Jetty的continuations编程架构,SUN.IBM.BEA等自不用说,商业版的服务器对Comet的支持,自然走在开源应用服务器前面,各自为王,没有一个统一的编程模型,怎一个乱字了得.相关的comet框架也不少,诸如pushlet.DWR.cometd;最近很热HTML5也不甘寂寞,推出W

自由创蚁-青少年积木式编程平台正式发布了!

自由创蚁积木式编程平台发布了! 类似Flash的动画,游戏开发平台: 基于cocos-2dx html5的跨平台游戏开发框架: 积木式的人人都可以玩编程的编程平台: 基于html5可以无需插件运行在任何浏览器:可以通过嵌入在iframe,作品 可以无缝在任何网站引用,运行! 网址:   http://freeant.cn 自由创蚁-青少年积木式编程平台正式发布了!,布布扣,bubuko.com

体育生学编程——html学习

HTML学习 1.HTML介绍(了解即可) HTML (Hyper Text Markup Language): HTML就是超文本标记语言的简写,是最基础的网页语言 HTML的版本: 2.0(IETF).3.0(W3C).4.01(W3C).5.0(W3C) IETF: Internet Engineering Task Force W3C:World Wide Web Consortium HTML的特点: 是通过标签来定义的语言,代码都是由标签所组成,代码不用区分大小写 由<html>开

前端编程提高之旅(三)----浏览器兼容之IE6

在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,由于移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙,一开始就比较好的支持web标准,而纵观整个互联网行业,移动web开发还处于起步阶段,在很长一段时间pc端web作为主要的服务形式还会继续.从小来说作为一名前端开发人员,不了解浏览器兼容也会贻笑大方.这篇文章基于<IE7web标准之道>,对浏览器兼容做一个概览.    时间到了2014年,大概很少人会想到IE7发布之后,时隔这么多年IE6仍然占据市场7%的浏览器份

HTTP协议(2)-------- 网络编程

1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,"消息头/消息体"的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干.HTTP协议传输的消息也是这样规定的,每一个HTTP包都分为HTTP头和HTTP体两部分,消息体是可选的,而消息头是必须的.每当我们打开一个网页,在上面点击右键,选择"查看源文件",这时看到的HTML代码就是HTTP的消息体,那么消息头可以通过浏览器的开发工具或者插件可以看到,如果火狐的Fi