js操作iframe

contentWindow    
在服务器环境下测试
contentDocument
二种方法的区别
子级iframe修改父级元素内容
window.parent
window.top与window.parent的区别

window.top:是当前文件最顶端的那个文件，window.parent:是当前文件上面的文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div style="width:200px; height:200px; background:red;"></div>

</body>

</html>

上面是iframe4

下面是iframe5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<div style="width:200px; height:400px; background:green;"></div>

</body>

</html>

　　父文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

window.onload = function(){

    var aInput = document.getElementsByTagName('input');

    var oIframe = document.getElementById('iframe1');

    function changeHeight(){

        setTimeout(function(){

            oIframe.height = oIframe.contentWindow.document.body.offsetHeight;

        },100);//防止转向文件与changeHeight函数同时运行

    }

    changeHeight();

    aInput[0].onclick = function(){

        oIframe.src = 'iframe4.html';

        changeHeight();

    };

    aInput[1].onclick = function(){

        oIframe.src = 'iframe5.html';

        changeHeight();

    };

};

</script>

</head>

<body>

<input type="button" value="切换1" />

<input type="button" value="切换2" />

<iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>

</body>

</html>

iframe2016/4/12的更多相关文章

  1. python 各模块

    01 关于本书 02 代码约定 03 关于例子 04 如何联系我们 1 核心模块 11 介绍 111 内建函数和异常 112 操作系统接口模块 113 类型支持模块 114 正则表达式 115 语言支 ...

  2. Python Standard Library

    Python Standard Library "We'd like to pretend that 'Fredrik' is a role, but even hundreds of vo ...

  3. 在mybatis中写sql语句的一些体会

    本文会使用一个案例,就mybatis的一些基础语法进行讲解.案例中使用到的数据库表和对象如下: article表:这个表存放的是文章的基础信息 -- ------------------------- ...

  4. AndroidStudio — Error:Failed to resolve: junit:junit:4.12错误解决

    原博客:http://blog.csdn.net/u013443865/article/details/50243193 最近使用AndroidStudio出现以下问题: 解决:打开app下的buil ...

  5. 读过MBA的CEO更自私？《哈佛商业评论》2016年第12期。4星

    老牌管理杂志.每期都值得精度.本期我还是给4星. 以下是本书中的一些内容的摘抄: 1:他们发现在Airbnb上,如果客人姓名听起来像黑人,那么比名字像白人的客人的接受率会低16%.#45 2:对立组织 ...

  6. 12个小技巧，让你高效使用Eclipse

    集成开发环境(IDE)让应用开发更加容易.它们强调语法,让你知道是否你存在编译错误,在众多的其他事情中允许你单步调试代码.像所有的IDE一 样,Eclipse也有快捷键和小工具,这些会让您感觉轻松许多 ...

  7. 第12章 Linux系统管理

    1. 进程管理 1.1 进程查看 (1)进程简介 进程是正在执行的一个程序或命令(如ls命令也是一个进程),每个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的作用 ...

  8. Jexus Web Server 完全傻瓜化图文配置教程（基于Ubuntu 12.04.3 64位）[内含Hyper-v 2012虚拟机镜像下载地址]

    1. 前言 近日有感许多新朋友想尝试使用Jexus,不过绝大多数都困惑徘徊在Linux如何安装啊,如何编译Mono啊,如何配置Jexus啊...等等基础问题,于是昨日向宇内流云兄提议,不如搞几个配置好 ...

  9. CSharpGL(12)用T4模板生成CSSL及其renderer代码

    CSharpGL(12)用T4模板生成CSSL及其renderer代码 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立 ...

随机推荐

  1. 聊天系统Demo，增加文件传送功能（附源码）－－ ESFramework 4.0 快速上手（14）

    本文我们将介绍在ESFramework 4.0 快速上手(08) -- 入门Demo,一个简单的IM系统(附源码)的基础上,增加文件传送的功能.如果不了解如何使用ESFramework提供的文件传送功 ...

  2. hdu2063 匈牙利算法 二分最大匹配模版题

    过山车 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u Java class na ...

  3. spring容器启动的加载过程(二)

    第六步: public abstract class AbstractApplicationContext extends DefaultResourceLoader implements Confi ...

  4. Just do it！！！

    4月英语竞赛期中考试 5月初级程序员考试 6月英语四级考试 7月期末考试 加油吧年轻人!

  5. 关于ios 程序加载百度地图lib，出现链接错误：找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法

    报告的错误信息 ld: warning: ignoring file /Users/5012/Documents/sphuang/IOS_project/baidu_map/ShareLocation ...

  6. 1010 Robot Motion

    Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...

  7. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  8. 《JavaScript高级程序设计》读书笔记 ---数据类型

    ECMAScript 中有5 种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number.String和Object——复杂数据类型,Object 本质上是由一组 ...

  9. Android闪光灯操作

    flashMode=Camera.Parameters.FLASH_MODE_TORCH;----常亮效果 Camera.Parameters.FLASH_MODE_ON----一闪一闪的效果

  10. python 文件夹操作

    常用的一些 import os for d, cd, fl in os.wald('.'): for f in fl: sufix = os.path.splitext(f)[1][1:] if su ...