jquery 实践操作：iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录
定义：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
常用的基本 iframe 设置（详细设置属性参考API：http://www.w3school.com.cn/tags/tag_iframe.asp）：
<iframe id="alarmStateTabIframe" scrolling="no" src=""></iframe>
关于 iframe 的相关操作：
- iframe 父页面获取&操作子页面元素（使用 iframe id 属性调用）
示例：
父页面：parentPage.html 文件，里面含有一个 iframe<!DOCTYPE html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面首页</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id='parDiv'>父页面</div>
<iframe src="childPage.html" id="youyou" height="" width=""></iframe> <!-- 包含的 iframe --> <script>
<!-- 父页面调用子页面 测试： 使用 id 属性调用 -->
window.onload = function(){
document.getElementById('youyou').contentWindow.document.getElementById('test').style.color = '#ff1e19';
// 等价于jquery: $("#youyou").contents().find("#test").css('color','red');
};
</script>
</body>
</html>子页面：childPage.html 文件，里面含有一个 iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<div id="test">我是iframe测试的子页面</div>
</body>
</html>运行父页面，会看到父页面的iframe部分写入了子页面文字!! 总结：
1. 父页面中 JS 获取/更改iframe子页面内容:
JS 获取: $(document.getElementById('youyou').contentWindow.document.body).html() //eg: $(document.getElementById('youyou').contentWindow.document.body).html("<h6>gusgu</h6><div id='test'> ghyauati</div>")
jquery 获取：$("#youyou",$('#test').document); //$("#youyou",parent.document.body).attr("src","http://www.baidu.com"); 替换子页面原来的所有内容2. 父页面中 JS 操作iframe子页面的某个元素:
JS 获取: document.getElementById('youyou').contentWindow.document.getElementById('test').style.color='red'
jquery 获取：格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例: $("#youyou").contents().find("#test").css('color','red'); //eg: $("#theiframe").contents().find("#flag").html()其他操作（未测）：
jquery 父、子页面之间页面元素的获取，方法的调用：1. 父页面获取子页面元素：
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id
2. 父页面调用子页面方法：
格式：$("#iframe的ID")[0].contentWindow.iframe方法();
实例：$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法
3. 子页面获取父页面元素：
格式：$("#父页面元素id" , parent.document);
实例：$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id3. 在父窗口中操作 选中 iframe 中的所有单选钮
$(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
4. 在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input:radio").attr("checked","true");
5. 父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：
$(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");父页面里的 iframe 中的某个元素获取
- iframe 父页面获取&操作子页面元素（使用 iframe name 属性调用）
示例：
父页面：parentPage.html，<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面首页</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe name="iframe1" src="childPage.html"></iframe>
<script>
window.onload =function () {
$(window.frames["iframe1"].document).on("click","#btn",function(){ //window.frames["iframe1"].document获的iframe标签嵌套页面document对象
$(this).html("");
})
}
</script>
</body>
</html>子页面：childPage.html，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<button id="btn">测试操作</button> </body>
</html>运行父页面，点击按钮会看到按钮上文字变化!!
- 子页面 操作获取&操作父页面元素：
参考： http://www.jb51.net/article/43406.htm 父页面写好div+iframe, 子页面中 JS 调用相应的元素，方法等 父页面：parentPage.html, 书写页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面首页</title>
</head>
<body>
<form id="form1"></form>
<div>
<div id="default" style="width: 100px; height: 100px; float: left;">default 里的卡卡</div>
<iframe id="iframeid" src="childPage.html" style=" width:400px; height:400px; float:left;"></iframe>
</div> <script>
var h = "hello";
function getHelloWo() {
alert("welcome to the world");
}
</script>
</body>
</html>子页面： childPage.html操作父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(function () {
//在iframe中查找父页面元素
alert($("#default", window.parent.document).html());
//在iframe中调用父页面中定义的方法
parent.getHelloWo();
//在iframe中调用父页面中定义的变量
alert(parent.h);
})
</script>
</body>
</html>运行 父页面 parentPage.html 看看效果，会不断弹出窗口；
总结：
原生 js 父页面元素的获取，方法的调用：
. 子页面调用父页面方法：
格式：parent.父页面方法
实例：parent.pClick(); // pClick 为父页面 js 方法 . 子页面获取父页面元素：
格式：window.parent.document.getElementById("父窗口元素ID");
实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id再示例： 子页面追加/更改元素：
父页面：parentPage.html 至少包含一个 iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="example">这是父级页面！</div>
<iframe name="iframe1" src="childPage.html"></iframe>
</body>
</html>子页面：childPage.html, 操作 父页面中元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script language="javascript">
$("body",parent.document).append('<br>这是子级页面追加的内容！'); //子页面给父页面追加内容
$("body",parent.document).find('#example').html('子级页面将替换父级页面的内容！'); //子页面改变父页面某个元素内容
</script>
</body>
</html>运行父页面 parentPage.html ，可以看到父页面内容的变化；
jquery 实践操作：iframe 相关操作的更多相关文章
- jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...
- iframe相关操作
内容摘要 父级获取iframe中的元素 父级触发iframe中的函数 iframe触发父级元素绑定的事件 iframe触发父级函数方法 iframe触发父级元素的值 parent.html <! ...
- javascript iframe相关操作
1. 获得iframe的window对象 iframeElement.contentWindow 2. 获得iframe的document对象 存在跨域访问限制. chrome:iframeEleme ...
- jQuery学习笔记--JqGrid相关操作 方法列表（上）
1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridi ...
- linux网络操作 防火墙相关操作
防火墙状态 查询防火墙状态 service iptables status 停止防火墙 service iptables stop 启动防火墙 service iptables start 重启防火墙 ...
- iframe的操作
获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...
- 原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
- Jquery 操作IFrame
使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
随机推荐
- android设备局域网中快速搜索之cling方式
cling方式就像pc端windows局域网工作组刷新显示一样,原来用过扫描ip地址的方式,可以使用就是有点慢,还有一种自己加入组广播,通过发送组广播的方式. android设备局域网中快速搜索之 ...
- 牛客小白月赛5 I 区间 (interval) 【前缀和】
链接:https://www.nowcoder.com/acm/contest/135/I 题目描述 Apojacsleam喜欢数组. 他现在有一个n个元素的数组a,而他要对a[L]-a[R]进行M次 ...
- 第六篇：python中numpy.zeros(np.zeros)的使用方法
用法:zeros(shape, dtype=float, order='C') 返回:返回来一个给定形状和类型的用0填充的数组: 参数:shape:形状 dtype:数据类型,可选参数,默认numpy ...
- Vue插槽
插槽内容 Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将元素作为承载分发内容的出口. <navigation-link url="/profile&quo ...
- .net core 获取浏览器UserAgent
这两天由于自己公司的机器磁盘不够用了,果断把VS2015卸载了,只留下VS2017 当我打开一个以前一个很简单的MVC4.0的项目时候 温馨提示要安装MVC4,我犹豫了一下,还是点了安装,接下来提示要 ...
- java util - 时间工具包 PrettyTime
需要 prettytime-3.2.3.Final.jar 包 代码例子 package cn.java.prettytime; import java.util.Date; import java. ...
- JZOJ 5838. 旅游路线 最大子段和
5838. 旅游路线 Time Limits: 1000 ms Memory Limits: 131072 KB Detailed Limits Goto ProblemSet Descrip ...
- spark和MR比较
MapReduce: 分布式的计算框架 缺点:执行速度慢 IO瓶颈 ==> 磁盘IO 网络IO shuffle机制:数据需要输出到磁盘,而且每次shuffle都需要进行排序操作 框架的机制: 只 ...
- 读书笔记3（Teamwork）
今天我阅读了<构建之法>的第四章——两人合作,它主要讲述了在两人合作进行项目时与单人作业时的区别与不同,其中最重要的就是代码规范.代码规范:我们写的代码虽然是电脑运行,但是最终还是给人看的 ...
- Windows Server 2008 正式版下载汇总
windows 2008是微软推出的新一代服务器专用系统版本, 具有良好的用户体验以及应用程序,windows 2008大幅提升了web服务以及应用程序的性能, 让企业在提供和维护资源服务的时候更加得 ...