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的框架的技术. ...
随机推荐
- QM项目开发文档整理
QM项目开发文档整理 前言 在W公司工作4个多月,庆幸接触到的全是"硬"项目,真枪实干,技术.经验.能力都得到了很大提升. QM项目 此项目WEB前端学到的东西很多,对PHP项目的 ...
- Python新手学习基础之运算符——位运算
位运算符 位运算实际上是把数字看作二进制来进行计算,它的运算法则如下: 结合实例,来看下位运算是如何进行的吧: 位运算在实际应用中用途很广泛,比如我们经常听到的子网掩码,它其实就是和IP地址做了按位与 ...
- [vim]插件NerdTree
NerdTree 这是插件的作用就是在vim中增加一个资源管理器 使用 利用设置的快捷键 C-e 可以快速打开或者关闭文件树 然后在文件树中可以快速搜索到你的文件, o打开当当前, t打开一个新的ta ...
- Leakcanary
一.什么是内存泄漏 垃圾回收器无法回收应被回收的对象比如:在Activity生命周期过程中,旋转屏幕时应新建activity,原activity应被销毁.但如果线程一直在引用此activity,则会出 ...
- window.open || window.showModalDialog || window.showModelessDialog
http://dwcmayday201204063551.iteye.com/blog/1621751 http://www.cnblogs.com/zhangyi85/archive/2009/09 ...
- Cmake 脚本对预处理器的宏定义
我们有些时候会在#if #ifndef 等预编译命令里面看到_WIN32等定义的宏.但是有些宏定义,你即使通过Visual Studio右键的go to definitions 和go to ...
- logstash 各种时间转换
<pre name="code" class="html">日期格式转换: /***** nginx 访问日志 [elk@zjtest7-front ...
- libjingle开发人员指南
libjingle开发人员指南 libjingle SDK包含C + +源代码和文档,使您能够设计连接和网络交换数据的应用程序(通过点对点数据连接).该SDK包含代码和示例应用程序,一个Window平 ...
- cf445A DZY Loves Chessboard
A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...
- bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明
Description A crime has been comitted: a load of grain has been taken from the barn by one of FJ's c ...