[转]内嵌页面iframe以及和其兄弟iframe的相互传值
iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法） 主页面调用iframe； iframe页面调用主页面； 主页面的包含的iframe之间相互调用；
主要知识点
1：document.getElementById("ii").contentWindow 得到iframe对象后，就可以通过contentWindow得到iframe包含页面的window对象，然后就可以正常访问页面元素了；
2：$("#ii")[0].contentWindow 如果用jquery选择器获得iframe，需要加一个【0】；
3：$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;
4：$("#ii")
[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
可以通过这种方式向iframe页面传递参数，在iframe页面window.hellobaby就可以获取到值，hellobaby是自定义的变量；
5：在iframe页面通过parent可以获得主页面的window，接着就可以正常访问父亲页面的元素了；
6：parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用，需要先得到父亲的window，然后调用同级的iframe得到window进行操作；
源码
源码包含内容，主页面（main.html）中含有两个iframe子页面(frame.html,newIframe.html)
主页面如何调用子页面中的方法；
子页面如何调用主页面中的方法；
两个子iframe之间如何如何进行交互 ;
main.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var gg="dsafdsafdsafdsafsdaf";
function ggMM() {
alert("2222222222222222222222222222222");
}
function callIframeMethod() {
//document.getElementById("ii").contentWindow.test();
$("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0]
}
function callIframeField() {
alert($("#ii")[0].contentWindow.ff);
}
function callIframeHtml() {
alert($("#ii")[0].contentWindow.$("#dd").val());
//alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
//alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
}
function giveParameter() {
$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
}
</script>
</head>
<body>
<a href="#" onClick="giveParameter();">参数传递</a>
<a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
<a href="#" onClick="callIframeField();">调用子iframe变量</a>
<a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>
<iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>
<iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe>
</body>
</html>
frame.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> var ff="adfdasfdsafdsafdsaf";
function test() {
alert($("#dd").val());
}
function callMainField() {
alert(parent.gg);
}
function callMainMethod() {
parent.ggMM();
}
function callMainHtml() {
alert(parent.$("#ii").attr("id"));
}
function getParameter() {
alert(window.hellobaby);
}
</script>
</head>
<body>
<a href="#" onClick="getParameter();">接受参数</a>
<a href="#" onClick="callMainMethod();">调用子iframe方法</a>
<a href="#" onClick="callMainField();">调用主窗口变量</a>
<a href="#" onClick="callMainHtml();">调用子iframe组件</a>
<input id="dd" type="text" value="1111111111"/>
</body>
</html>
兄弟iframe页面 newIframe.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.cnblogs.com/http://www.cnblogs.com/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
var ff=parent.$("#ii")[0].contentWindow.ff;
alert(ff);
}
</script>
</head>
<body>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>
<input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>
如果是在easyui的tab的选项卡中,有个实例这么做:
//得到被选中的tab对象
var tab=parent.$("#tabs").tabs("getSelected");
//该iframe是在tab选项卡中的一个内嵌的iframe,获取该页面的id为tableId的值
tab.panel("body").find("iframe")[0].contentWindow.$("#tableId").val(id);
//获取被选中的tab的内嵌页面iframe的id为clcs的datagrid,并重新加载数据
tab.panel("body").find("iframe")[0].contentWindow.$('#clcs').datagrid('reload');
[转]内嵌页面iframe以及和其兄弟iframe的相互传值的更多相关文章
- 如何根据iframe内嵌页面调整iframe高宽续篇
接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...
- Python3.x：selenium获取iframe内嵌页面的源码
Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...
- WebBrowser内嵌页面的跨域调用问题
很早之前我写过一篇Blog:网页通过External接口与WebBrowser交互,文中的交互其实只介绍了JS调用C++的部分,而C++调用JS由于微软自己的例子太多,那篇文章就没介绍,不过我最近遇到 ...
- 如何根据iframe内嵌页面调整iframe高宽
问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置ifram ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- iframe内嵌页面——跨域通讯
<template> <div class="act-form"> <iframe :src="src" ref=" ...
- iframe动态改变内嵌页面高度
test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...
- 一个页面中内嵌页面 iframe元素
iframe.html: <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- ifame内嵌页面全屏完美展示
<body style= marginwidth= marginheight= width='100%' height='100%' allowfullscreen='true' src='ht ...
随机推荐
- zookeeper 客户端编程
zookeeper是一个分布式的开源的分布式协调服务,用它可以来现同步服务,配置维护.zookeeper的稳定性也是可以保证的,笔者曾参与过的使用zookeeper的两个应用,一个是用zookeepe ...
- [转]NHibernate之旅(13)：初探立即加载机制
本节内容 引入 立即加载 实例分析 1.一对多关系实例 2.多对多关系实例 结语 引入 通过上一篇的介绍,我们知道了NHibernate中默认的加载机制——延迟加载.其本质就是使用GoF23中代理模式 ...
- as3+java+mysql(mybatis) 数据自动工具（一）
在页游中,大部分的开发模式都是:客户端(as3)+ 服务端(java)+ 数据库(mysql). 在这3个部分会有一个相同的部分就是数据结构.比如一个用户数据,在客户端使用类 UserVO(as3) ...
- 最近用unity5弄的一些渲染
unity5 人皮渲染 Skin Shading 换了一种方法,优化了一下代码,unity5效果很好,消耗不大 点开可查看大图 加入了次表面散射的阴影与自阴影 unity5 ocean real- ...
- linux内存分配机制
这几天在观察apache使用内存情况,所以特意了解了下linux的内存机制,发现一篇写得还不错.转来看看. 一般来说在ps aux中看到的rss就是进程所占用的物理内存.但是如果将所有程序的rss加起 ...
- oracle 实例名和服务名以及数据库名区别
一.数据库名什么是数据库名?数据库名就是一个数据库的标识,就像人的身份证号一样.他用参数DB_NAME表示,如果一台机器上装了多全数据库,那么每一个数据库都有一个数据库名.在数据库安装或创建完成之后, ...
- bzoj 3033 太鼓达人
思路:首先一定是2^m次方的总数.用二进制从 000 一直到 111总过m个数,然后暴搜. #include<cstdio> #include<cstring> #includ ...
- 【原创】Mac上编译Hadoop1.0.3出现的一些问题
create-native-configure: [exec] configure.ac:47: error: possibly undefined macro: AC_PROG_LIBTOOL [e ...
- HW2.23
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- Trie树模板~~~
* + ; ; // 字母表为全体小写字母的Trie struct Trie { int ch[maxnode][sigma_size]; int val[maxnode]; int sz; // 结 ...