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. 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证（Forms-Based-Authentication）中的应用

    //http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...

  2. ubuntu下打开chm文件

    CHM文件格式是微软1998年推出的基于HTML文件特性的帮助文件系统,以替代早先的WinHelp帮助系统,它在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件”. chm文件因为 ...

  3. redis数据类型：sorted sets类型及操作

    sorted sets类型及操作: sorted set是set的一个升级版本,它是在set的基础上增加了一个顺序 属性,这一属性在添加修改元素的时候可以指定,每次指定后,zset会 自动重新按新的值 ...

  4. beginBackgroundTaskWithExpirationHandle

    [[UIApllication sharedApplication] beginBackgroundTaskWithExpirationHandle:^{}];这个方法在app进入后台时,可以做一些事 ...

  5. MediaWiki搭建教程

    ♦  MediaWiki是什么以及有什么作用,这里我就不再阐述了,网上可以查到很多.这里只是简单记录一下搭建wiki的基本过程,给一些热爱捯饬的小伙伴一些参考. ♦  其实wiki的搭建本身很简单,最 ...

  6. Yii2.0 多条件搜索 带分页

                                   方法一   在控制器中 ; if($titles!=""){ $where.=" and title lik ...

  7. ios NSComparator 三种枚举类型

    NSComparator有3种枚举类型 NSOrderedDescending 降序,但是用他可以实现升序或者降序都没问题. NSOrderedAscending 升序,但是目前没有使用出任何效果.. ...

  8. 项目管理实践【六】自动同步数据库【Using Visual Studio with Source Control System to synchronize database automatically】

    在上一篇项目管理实践[五]自动编译和发布网站中,我们讲解了如何使用MSBuild+Robocopy+WebDeployment来自动编译和部署网站,今天,我们来看一下,如何使用MSBuild +SVN ...

  9. Android中的Glide加载图片

    注意:在Android Studio的项目的build.gradle中添加: compile 'com.github.bumptech.glide:glide:3.6.1' 然后同步一下 目录: 使用 ...

  10. JS获取当前使用的浏览器名字以及版本号

    JS获取当前使用的浏览器名字以及版本号 工作中需要通过JS去获取当前使用的浏览器的名字以及版本号,网上大堆资料都有一个关键词是 navigator.appName,但是这个方法获取的浏览器的名字只有两 ...