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. Chapter 15_4 子模块和包

    Lua支持具有层级性的模块名,可以用一个点来分隔名称中的层级. 比如,一个mod.sub模块,它就是mod的子模块.一个包(package)就是一个完整的模块树. 当你require "mo ...

  2. jquery选择器的简单使用

    1.$()可以是$(expresion),即css选择器.Xpath或html元素,也就是通过上述表达式来匹配目标元素. 比如:$("a")构造的这个对象,是用CSS选择器构建了一 ...

  3. SharePoint2013 Excel导出好的代码

    C#Excel操作类ExcelHelper.cs 来源:http://www.hellocsharp.com/article/67.aspx C#源码世界 发布于: 2014-09-12 使用本类之前 ...

  4. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

  5. hosts etc css-js

    http://laod.cn http://tool.css-js.com/rgba.html

  6. Struts2--课程笔记1

    第一个Struts程序: 在开发Struts程序之前,首先要导入额外的jar包,基本需求的是14个jar包,关于14个ja包是什么,有什么作用,此处不讲述. 还要配置web.xml文件,注册Strut ...

  7. 使用node.js创建第一个应用

    node.js应用组成部分 1.引入require模块:我们可以使用require指令来载入Node.js模块. 2.创建服务器:服务器可以监听客户端的请求,类似于Apache,Nninx等HTTP服 ...

  8. Python使用ctypes访问C代码

    工具:CodeBlocks 新建一个分享库工程( Shared library ),随便编写一个C代码的函数 // test.c #include <stdio.h> int fib(in ...

  9. android性能调优之traceview的使用

    1.在开始使用TraceView你要注意: 你的设备和模拟器必须设置SD card 和 你的程序拥有对SD card 具有读写操作的权限( <uses-permission android:na ...

  10. java计数器CountDownLatch

    CountDownLatch里面有个属性为state,当为零时触发代码往下执行,代码如下: package threadLock; import java.util.Random; import ja ...