[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值
今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料
下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
DOM方法:
父窗口操作IFRAME:window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(”:text”);
iframe框架的HTML:<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成jquery对象。
例子:
主页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页面</title>
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function showSubValue(){ alert( window.frames[0].document.getElementById("zhe").value);
//var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;
//alert(v);
// http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html
// var o = $(window.frames[0].document).find(":div#subdiv1");
// alert(o.html());
}
</script>
</head>
<body>
<div id="mainDiv">主页面测试数据</div>
<input type="button" value="查看子页面数据" onclick="showSubValue();"/>
<iframe src="zi.html" width="300" height="300"></iframe>
</body>
</html>
子页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<title>子页面</title>
<script type="text/javascript">
function showMainValue(){
//dom方式
var v = window.parent.document.getElementById("mainDiv").innerHTML;
alert(v); window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据"; //jquery方式
// var o = $(window.parent.document).find(":div#mainDiv");
// alert(o.html());
}
</script>
</head>
<body>
<div id="subdiv1" >子页面测试数据</div>
<input type="button" id="zhe" value="显示父页面数据" onclick="showMainValue();"/>
</body>
</html>
[HTML]HTML框架IFrame下利用JS在主页面和子页面间传值的更多相关文章
- mui框架如何实现页面间传值
mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...
- MUI框架-02-注意事项-适用场景-实现页面间传值
MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...
- js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
- iframe中父页面与子页面的传值方法
涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...
- JS页面间传值
一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—> <input type="tex ...
- (转)JS页面间传值
一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—> <input type="text& ...
- web 页面间传值 js 封装方法
用法 var id = getParam("id"); function getParam(strKey) { var url=document.URL; //var url=&q ...
- Flex中利用事件机制进行主程序与子窗体间参数传递
在开发具有子窗体,或者itemrenderer的应用时,常常涉及到子窗体向父窗体传递参数或者从itemrenderer内的控件向外部的主程序传递参数的需求.这些都可以通过事件机制这一统一方法加以解决. ...
- 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作
HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
随机推荐
- SVN提交.a文件的方法
选择菜单View-->Ignored Files,这样就会显示出ignored的文件,找到你要上传的.a文件,右键“Add”就可以了.
- [转]EntityFramework走马观花之CRUD(中)
学习Entity Framework技术期间查阅的优秀文章,出于以后方便查阅的缘故,转载至Blog,可查阅原文:http://blog.csdn.net/bitfan/article/details/ ...
- jquery对strutrs2 <s:radio>标签的设置和取值
今天郁闷了1小时. 需求是这样的: <s:radio list="#{0:'男',1:'女'}" value="member.sex" id=" ...
- sql server常见服务
根据您决定安装的组件,SQL Server 安装程序将安装以下服务: SQL Server Database Services - 用于 SQL Server 关系数据库引擎的服务. 可执行文件为 & ...
- Groupon面经Prepare: Sort given a range && Summary: Bucket Sort
首先是如何sort一个只有0和1的数组,要求inplace. follow up是告诉一个range,如何在O(N)时间内sort好 两个pointer可解 package Sorting; impo ...
- !!20160829——多次错误的T+0操作
- 转:SELENIUM TIPS: CSS SELECTORS
This page will show you some CSS rules and pseudo-classes that will help you move your XPATH locator ...
- powershell 参数 [String]Service
此种情况,去掉前面的[String] 在里面操作的时候就会认为是string,并可以自动操作了,否则限定为String类型时,就无法将输入的a,b当作String了, 或者需要添加'a,b'单引号来变 ...
- javascript浏览器对象
window对象 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JS全局对象.函数以及变量均自动成为window对象的成员 全局变量是window对象的 ...
- ios学习笔记(一)Windows7上使用VMWare搭建iPhone开发环境(转)
原文地址:http://blog.csdn.net/shangyuan21/article/details/18153605 我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是M ...