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的框架的技术. ...
随机推荐
- WF学习
1.添加argument 类的argument必须先在表达式里面实例化 argument和variable 没有区别啊??????? http://msdn.microsoft.com/en-us/l ...
- ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- MTKdroidToolsV2.53 MTK安卓提取线刷资料的工具 使用教程
备份的时候需插入1G以上内存卡,并确保机器电量充足. 机器需要root才能备份. 最新版本 支持大部分机型 一键root
- LeetCode_Minimum Path Sum
iven a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- BAT线下战争：巨额投资或培养出自己最大对手（包括美团、58、饿了么在内的公司都在计划推出自己的支付工具和金融产品，腾讯只做2不做O）
BAT线下战争:巨额投资或培养出自己最大对手 2015年10月12日09:49 <财经>杂志 我有话说(18人参与) 收藏本文 BAT大举投资线下公司,看似咄咄逼人 ...
- GDB 的MI接口
背景介绍: libgdb过时了,目前的GDB调试前端都不用libgdb 目前有两种比较流行:- MI接口,现在应该是MI II接口,是Eclipse CDT所采用的方式- emac输出接口,这个似乎有 ...
- MyBatis里json型字段到Java类的映射
一.简介 我们在用MyBatis里,很多时间有这样一个需求:bean里有个属性是非基本数据类型,在DB存储时我们想存的是json格式的字符串,从DB拿出来时想直接映射成目标类型,也即json格式的字符 ...
- Js树型控件Dtree使用
dtree地址:http://destroydrop.com/javascripts/tree/ Key features Unlimited number of levels 无限级 Can be ...
- quote, quasiquote, unquote和unquote-splicing
关于符号类型 符号类型又称引用类型,在概要一文中本人介绍得非常的模糊,使很多初学者不理解.符号类型在Scheme语言中是最基础也是最重要的一种类型,这是因为Scheme语言的祖先Lisp语言的最初目的 ...
- 一个资深java面试官的“面试心得”
在公司当技术面试官几年间,从应届生到工作十几年的应聘者都遇到过.先表达一下我自己对面试的观点: 1.笔试.面试去评价一个人肯定是不够准确的,了解一个人最准确的方式就是“路遥知马力,日久见人心”.通过一 ...