js控制Iframe 和 iframe与主页的交互，传值 (转载)

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对象。

例子：

主页面

<title>主页面</title>

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

function showSubValue(){

//var v = window.frames[0].document.getElementById("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="查看子页面数据" οnclick="showSubValue();"/>

<iframe src="sub.html" width="300" height="300"></iframe>

</body>

</html>

子页面：

<script type="text/javascript" src="css_js/jquery/jquery-1.3.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" value="显示父页面数据" οnclick="showMainValue();"/>

</body>

</html>

js控制Iframe 和 iframe与主页的交互，传值 (转载)相关推荐

JS案例：前端Iframe及Worker通信解决思路
目录前言 Iframe通信 Worker通信实现思路实现过程 MessageCenter类 IPC类 Server类 Client类 PeerToPeer 功能演示基础功能父子通信兄弟通信 ...
使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。
出处:http://gongxquan.blog.163.com/blog/static/2108462532012111643039216 使用iframe的优缺点,为什么少用iframe以及ifr ...
Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
frameset ajax,js控制frameSet示例
js控制frameSet示例 1:js修改frameset的cols属性来达到修改各个页面所占的宽高,例如隐藏当前frame页. 复制代码代码如下: window.parent.document.g ...
pdfjs 使用viewer 实现自动翻页（js控制）
pdfjs 使用viewer 实现自动翻页使用js控制自动翻页 //获取嵌入在iframe中的子页面的window对象var childWindow = $("#myFrame" ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
Jquery取得iframe中元素的几种方法（转载）
Jquery取得iframe中元素的几种方法(转载) iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME: ...
iframe高度自适应的6个方法【转载】
iframe高度自适应的6个方法 JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们 ...
.net 2.0 点击按钮用js控制是否回发关于vs2005的webproject补丁
.net 2.0 点击按钮用js控制是否回发点击按钮,对用户输入进行判断,如果用户输入的没有问题,就提交,反之就不能提交,这个可以用下面的js函数来完成 function check() { if( ...
js控制audio音量_js控制html5 audio音频暂停播放
js控制html5 audio音频暂停播放音乐控制音乐播放/暂停重新播放 function rbf(){ var audio = document.getElementById('music1 ...

js控制Iframe 和 iframe与主页的交互，传值 (转载)

js控制Iframe 和 iframe与主页的交互，传值 (转载)相关推荐

最新文章

热门文章