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的框架的技术. ...
随机推荐
- Android ndk第一步，构建jni headers
转载请注明出处:http://www.cnblogs.com/fpzeng/p/4281801.html 源码请见 https://github.com/fpzeng/HelloJNI PC系统: u ...
- zookeeper笔记--配置以及和spark hbase结合使用
Spark集群基于ZooKeeper的搭建:http://www.dataguru.cn/thread-333245-1-1.html Spark需要修改的地方: 进入spark的配置目录,参照下面代 ...
- nodejs javascript微信开发
1.当从第三方软件需要分享到微信的时候 需要给授权处理才能获得微信信息 比如 nickname 等昵称图像等 从第三方登陆跳转到微信分享页需要 shareurl = http://open.weixi ...
- 从现在开始使用nodejs开发的几点答疑
1.为什么要开始用nodejs, 而不是php 理由有三点: 因为我是前端程序员出身,nodejs都是用javascript写的,这样相当于前端和后端都使用javascript,开发更加有效率.当然很 ...
- CH Round #53 -GCD Path
描述 给定一张N个点的有向图,点i到点j有一条长度为 i/(gcd(i,j))的边.有Q个询问,每个询问包含两个数x和y,求x到y的最短距离. 输入格式 第一行包含两个用空格隔开的整数,N和Q. 接下 ...
- linux内存管理--伙伴系统和内存分配器
3.1页框的管理 所有的页框描述符都存放在mem_map数组中. 3.1.1page数据结构 struct page { page_flags_t flags; //标志 atomic_t _coun ...
- c语言结构体3之结构体嵌套
注意: 1结构体内部再次定义一个结构体 但是没有创建结构体的实例 也就是说再次定义的结构体内部的变量会被当做母结构体的成员变量 struct tianchao { int data; ]; stru ...
- html--鼠标控制DIV移动
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- MyBatis初学者配置
小配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC &qu ...
- (转)iOS Wow体验 - 第三章 - 用户体验的差异化策略
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第三章译文精选,其余章节将陆续放出.上一篇:Wow ...