iframe编程的一些问题

时间:2022-12-24 19:16:19

前几天做一个用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---网页编程&lpar;2&rpar;

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

  8. 2015第25周三iframe小结

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

  9. JavaScript异步编程

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

随机推荐

  1. vim使用01

    安装与基础配置 iTerm快捷操作 清屏: <C l>/<W k> 剪切: <W x> 复制: <W v> 新增窗口: <W d> 切换窗口 ...

  2. matlab绘图--线性规划图解法示意

    matlab绘图--线性规划图解法示意 图解法 matlab绘图 区域填充 线性规划问题: matlab绘图 L1=[4,0;4,4];  plot(L1(:,1),L1(:,2));hold on  ...

  3. Rhel6-torque作业调度系统配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.121 server21.example.com 计算节点 192.1 ...

  4. CodeForces 176C Playing with Superglue 博弈论

    Playing with Superglue 题目连接: http://codeforces.com/problemset/problem/176/C Description Two players ...

  5. SQL Server -&gt&semi;&gt&semi; 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表)

    原文:SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表) 作为SQL Server 2016(CTP3.x)的另一 ...

  6. 泛泰A870S官方4&period;4&period;2系统S0218210 内核版本号信息

    从EGL中获取的信息: OpenGL ES Shader Compiler Version: 17.01.12.SPL Build Date: 02/24/14 Mon Local Branch: R ...

  7. PHP解析和生成xml&lpar;DOMDocument版&rpar;

    上次和大家分享了SimpleXML操作xml的一些知识,但是php中除了simplexml还有DOMDocument,这次就着重来看看DOMDocument的用法,还是把生成xml和解析xml分开写 ...

  8. ABP官方文档翻译 10&period;1 ABP Nuget包

    ABP Nuget包 Packages Abp Abp.AspNetCore Abp.Web.Common Abp.Web Abp.Web.Mvc Abp.Web.Api Abp.Web.Api.OD ...

  9. egametang启动配置

    egametang的启动配置文件可以在Unity的Tools->命令行配置中修改保存然后启动 如果需要添加自定义的启动配置项目,只需要修改客户端的 ServerCommandLineEditor ...

  10. Makefile模板(C&plus;&plus;)

    Makefile的C++的一个模板,可用于根据不同源文件,生成多个可执行文件 . CC = g++ DIR_INC = ./include DIR_SRC = ./src DIR_OBJ = ./ob ...