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的框架的技术. ...
随机推荐
- 神奇的match和replace
源自跟奈落大叔的讨论,PHP和JavaScript的比较. 正则: 先说几个正则写法: () 选择匹配一组, (?:) 降低 () 的优先级, .*? 和 .+? ,阻止 . 和 + 的贪婪. 还有一 ...
- xml文件操作
public static XmlDocument getDoc(String path)//加载xml文档 { XmlDocument doc = new XmlDocument(); doc.Lo ...
- Visual studio 内存不足的解决方案（out of memory）
编译Visual Studio项目,如果出现"out of memory "的编译错误,可以进行如下操作,加大应用程序可以使用的内存. 请先备份好系统和设置好系统还原点,大体步骤是 ...
- 转载的别人的ajax跨域解决方法
http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...
- Qt下使用的静态链接库------ *.lib转化为mingw使用的.a格式的静态库
使用MinGW附带的工具reimp.exe,该工具一般在MinGW in目录下,其readme文档在MinGWdoc eimp目录下, 方法很简单,比如: C:CodeBlocksMinGWlibdx ...
- 打开首页老是加载themes.googleusercontent.com_Wopus问答
打开首页老是加载themes.googleusercontent.com_Wopus问答 打开首页老是加载themes.googleusercontent.com
- NetAnalyzer笔记 之 九 使用C#对HTTP数据还原
[创建时间:2016-05-12 00:19:00] NetAnalyzer下载地址 在NetAnalyzer2016中加入了一个HTTP分析功能,很过用户对此都很感兴趣,那么今天写一下具体的实现方式 ...
- 关于时间的操作（JavaScript版）——依据不同区时显示对应的时间
如今项目基本上告一段落了,难得有一定的闲暇,今天利用数小时完毕了一个功能模块--依据不同区时显示对应的时间,这方面网上基本没有现成的样例,如今将代码粘贴例如以下: <!DOCTYPE HTML ...
- JMeter简单的性能测试实例
JMeter基础之——一个简单的性能测试 我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测试目标网站 ...
- DEV GridControl 获取选中行的数据
private void gridView1_FocusedRowChanged(object sender, DevExpress.XtraGrid.Views.Base.FocusedRowCha ...