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加载完毕再绑定事件可解决此问题。
iframe编程的一些问题的更多相关文章
- 【转】javascript面向对象编程
摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- [小北De编程手记] : Lesson 07 - Selenium For C# 之 窗口处理
在实际的自动化测试过程中,我们会遇见许多需要对窗口进行处理的情况.比如,点击删除某条信息的时候系统会显示一个Alert框.或者点击某个超链接时会在浏览器中打开一个新的页面.这一篇,来和大家分享一下Se ...
- http服务&ajax编程
http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...
- html部分---表单、iframe、frameset及其他字符的用法(以及name、id、value的作用与区别);
<form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...
- 对frameset、frame、iframe的js操作
框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一 ...
- HTML---网页编程(2)
前言 接着前面的HTML-网络编程1)来学习吧~~~ 色彩的表示 在计算机显示器中,使用红(red).绿(green).蓝(blue)3种颜色来构成各种各样的颜色.颜色的种类有16,256及65536 ...
- 2015第25周三iframe小结
一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引 ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...
随机推荐
- Webform 上传图片加水印
界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...
- web app iphone4 iphone5 iphone6 响应式布局 适配代码
在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5.] 那么-webkit-min-device-pix ...
- 拒绝了对对象 'base_config' (数据库 '****',架构 'dbo')的 SELECT 权限
在网上看了很多资料都是空说一谈,都只是说很简单,然后没有说遇到这样的情况具体该怎么做,看到这里都知道是权限问题,其实我们每一个人都知道,又是我觉得我还是要给以后遇到的朋友个解决方法: 这里用到的数据 ...
- Node.js 框架
Node.js的是一个JavaScript平台,它允许你建立大型的Web应用程序. Node.js的框架平台使用JavaScript作为它的脚本语言来构建可伸缩的应用. 当涉及到Web应用程序的开发 ...
- .NET Core 跨平台发布(dotnet publish)
.NET Core 跨平台发布(dotnet publish) ,无需安装.NET Core SDK,就可以运行. 前面讲解了.NET Core 的VSCode 开发.现在来讲讲发布(dotnet p ...
- 【大型网站技术实践】初级篇:搭建MySQL主从复制经典架构
一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...
- 《CLR.via.C#第三版》第二部分第10,11章节读书笔记(五)
第10章是对 属性 做阐述 属性本质上是方法 匿名类型的使用: }; Console.WriteLine("Name={0},Year={1}",o1.Name,o1.Year); ...
- 不要对外公开泛型List成员
最近在阅读Framework Design Guidelines,本着现学现用的原则,于是就用FxCop工具对代码进行规范性检查时,发现了很多问题,其中包括命名以及一些设计上的规范. 其中,Do no ...
- Step by step 活动目录中添加一个子域
原创地址:http://www.cnblogs.com/jfzhu/p/4006545.html 转载请注明出处 前面介绍过如何创建一个域,下面再介绍一下如何在该父域中添加一个子域. 活动目录中的森林 ...
- java:警告:[unchecked] 对作为普通类型 java.util.HashMap 的成员的put(K,V) 的调用未经检查
java:警告:[unchecked] 对作为普通类型 java.util.HashMap 的成员的put(K,V) 的调用未经检查 一.问题:学习HashMap时候,我做了这样一个程序: impor ...