iframe的操作
获取iframe的window，获取Iframe的document，获取父页面的window，某个环境是否iframe，动态创建iframe
这是demo.html，这个页用iframe嵌入了iframe.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Demo页 </title>
</head>
<body>
<h1>我是Demo页</h1>
<iframe id="ifr" src="iframe.html" frameborder="0"></iframe>
<div id="btn">
<input type="button" value="获取iframe的window对象"/>
<input type="button" value="获取iframe的document对象"/>
<input type="button" value="这个window不是iframe，返回null"/>
<input type="button" value="这个window是iframe"/>
<input type="button" value="动态加载iframe"/>
</div>
<script type="text/javascript">
var oIfr = document.getElementById("ifr"),
aBtns = document.getElementById("btn").getElementsByTagName("input"); //设置domain，和谐跨域访问限制
document.domain = "localhost"; //iframe相关操作
var getIframe = {
//获取iframe的window对象
getWin : function(obj){
return obj.contentWindow;
},
//获取iframe的document
getDoc : function(obj){
//chrome and ff or ie
return obj.contentDocument || obj.contentWindow.document;
},
//在iframe里获得父页面的window对象
getParents : function(){
return {
parent : window.parent,
top : window.top
}
},
//当前环境是不是iframe
isIframe : function(win){
return win.frameElement;
},
//动态创建iframe，返回创建好的iframe标签html
createIframe : function(src, fncallback){
var ifr = document.createElement("iframe");
ifr.src = src;
if(ifr.attachEvent){
ifr.attachEvent("onload", fncallback);
}else{
ifr.addEventListener("load", fncallback, false);
} return ifr;
}
}; //子页面执行的方法
function showDemo(){
alert("我是Demo页的方法，在iframe里触发：showDemo");
} //获取iframe的window对象
aBtns[0].onclick = function(){
getIframe.getWin(oIfr).showWindow();
};
//获取iframe的document对象
aBtns[1].onclick = function(){
alert(getIframe.getDoc(oIfr).getElementById("oDiv").innerHTML);
};
//当前的window不是iframe
aBtns[2].onclick = function(){
alert(getIframe.isIframe(window));//null
};
//当前的window是iframe
aBtns[3].onclick = function(){
alert(getIframe.isIframe(getIframe.getWin(oIfr)));
};
//动态加载iframe
aBtns[4].onclick = function(){
var t = null;
t = getIframe.createIframe("http://www.baidu.com/", (function(){
alert("这个新创建的iframe元素load时发生");
}()));
document.getElementsByTagName("body")[0].appendChild(t);
}
</script>
</body>
</html>
这是iframe.html页面，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> iframe页 </title>
</head>
<body style="border: 1px #ccc solid;">
<h1>我是iframe页</h1>
<div id="oDiv">我是iframe页：iframe页的oDiv</div>
<div id="btn">
<input type="button" value="获取父页面的window对象"/>
</div>
<script type="text/javascript">
var oIfr = document.getElementById("ifr"),
aBtns = document.getElementById("btn").getElementsByTagName("input"); //设置domain，和谐跨域访问限制
document.domain = "localhost"; //iframe相关操作
var getIframe = {
//在iframe里获得父页面的window对象
getParents : function(){
return {
parent : window.parent,
top : window.top
}
}
}; //Demo里执行的方法
function showWindow(){
alert("我是iframe页：iframe页的showWindow方法");
} //获取父页面的window
aBtns[0].onclick = function(){
getIframe.getParents().parent.showDemo();
}; </script>
</body>
</html>
iframe的操作的更多相关文章
- jquery 实践操作：iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- iframe父子操作
1.js在iframe子页面操作父页面元素代码: window.parent.document.getElementByIdx_x("父页面元素id"); 2.js在父页面获取if ...
- iframe之间操作记录
1.watch.js (function ($) { $.fn.watch = function (callback) { return this.each(function () { //缓存以前的 ...
- jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...
- 跳出框架iframe的操作语句
常用的iframe操作语句 ① 本页面跳转语句: "window.location.href" 或者 "location.href" ② 上一层页面跳转 ...
- jquery/js iframe 元素操作
1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...
- iframe的操作switch_to_frame使用方法.
一.frame和iframe区别 Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性. frame是整个页面的框架,iframe是内嵌的网页元素,也可以说 ...
- iframe中操作主体页面的元素，方法
在不使用三大框架的情况下,iframe的使用可以做到在页面中直接引入别的页面作为当前页面的一部分,但是在iframe的使用过程中存在一些相互之间的操作 例如在iframe中获取主页面的元素,使用主页面 ...
- jQuery中iframe的操作
今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息? 如图: 点击之前: 单击之后: 分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术. ...
随机推荐
- Python学习笔记总结(一)对象和流程语句总结
一.对象类型 1.数字 数字:不可变 2.字符串 字符串:不可原处修改[修改需要创建新的对象],有顺序,支持求长(len),合并(+),重复(*),索引S[0],分片(S[1:3]],成员测试(in) ...
- OC .(点）与->(箭头）用法区别
这两天同学总是问OC里.和->的用法区别,当时回答的不是很好,周末查了一下,大概清楚了,在这里记录一笔. 先看这个例程 #import <Foundation/Foundation.h&g ...
- SQL Fetch size
JDBC performance tuning with optimal fetch size February 1, 2009 31 Comments Tuning performance usin ...
- USART笔记 基于STM32F107VCT6
USART 通用同步异步收发器 通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间进行全双工数据交换.USART利用分数波特率发生器提供宽范围的 ...
- ISO7816通讯协议在工控主板EM9160中的实现方案
在新的国家电网智能终端相关标准中,规定了通过专门的加密芯片来保证设备数据安全性的方法,而设备主控单元与加密芯片采用了广泛应用的ISO7816通讯协议.工控主板EM9160为了适应这一新的技术需求,对其 ...
- Linux环境下使用JFS文件系统
Linux环境下使用JFS文件系统 JFS是IBM公司为linux系统开发的一个日志文件系统.从IBM的实力及它对Linux的态度来看,JFS应该是未来日志文件系统中最具实力的一个文件系统. JFS提 ...
- rdesktop命令连接Win7远程桌面
1. 开启远程服务,并添加远程桌面用户: 2. 远程桌面开启失败,如果远程桌面开启失败,到服务控制台里面去找到“remote desktop services”依赖的几个服务,是不是被禁用了.都开启一 ...
- BZOJ2393: Cirno的完美算数教室
2393: Cirno的完美算数教室 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 138 Solved: 83[Submit][Status] D ...
- Html.DropDownList的用法
直接上代码 页面代码 <td> <%= Html.DropDownList("selCity") %> </td> controller里面的代 ...
- DateTime字段控件值显示短格式的做法
后台取dateTime格式,前台格式化就好了 <input type="text" name="txtPartyTime" id="txtPar ...