[转]内嵌页面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 ...
随机推荐
- jquery的常用插件
jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...
- Android3.0中ActionBar的新特性
1. ActionBar(活动栏)替代了显示在屏幕顶端的标题栏.主要负责显示菜单,widget,导航等功能,主要包括:@ 显示选项菜单中的菜单项到活动栏:@ 添加可交互的视图到活动栏作为活动视图: ...
- libcurl断点下载
开发需要写了一个处理curl 下载的c++类,内含有多个静态方法和实例方法,写在这里留给有需求的同学 头文件 CURLHelper.h enum CURLHelperStateType { CURLH ...
- Java笔记(二十六)……IO流上 字节流与字符流
概述 IO流用来处理设备之间的数据传输 Java对数据的操作时通过流的方式 Java用于操作流的对象都在IO包中 流按操作的数据分为:字节流和字符流 流按流向不同分为:输入流和输出流 IO流常用基类 ...
- vijos P1459 车展（Treap，中位数）
P1459车展 描述 遥控车是在是太漂亮了,韵韵的好朋友都想来参观,所以游乐园决定举办m次车展.车库里共有n辆车,从左到右依次编号为1,2,…,n,每辆车都有一个展台.刚开始每个展台都有一个唯一的 ...
- PHP字符串操作汇总
PHP开发中常用的字符串操作介绍 -- 简明现代魔法 PHP学习笔记之字符串的简单处理 - RuanJava的专栏 - 博客频道 - CSDN.NET PHP String 函数
- 第一个php网页
<?php date_default_timezone_set('PRC'); if($_POST[ok]) { //echo "记录"; //echo "here ...
- Rational Rose 2007 &Rational Rose 2003 下载及破解方法和汉化文件下载
这么好的东西,不拿来出分享,我对不起原作者呀.可是我这里不知道作者是谁,感谢在先了. ed2k://|file|%5BIBM%E8%BD%AF%E4%BB%B6%E7%B3%BB%E5%88%97%5 ...
- Spring3.0 AOP 具体解释
一.什么是 AOP. AOP(Aspect Orient Programming),也就是面向切面编程.能够这样理解,面向对象编程(OOP)是从静态角度考虑程序结构,面向切面编程(AOP)是从动态角度 ...
- linux学习之八---Linux进程基础知识
一.linux进程 linux是一个多用户多任务的操作系统. 多用户是指多个用户能够在同一时间使用计算机. 多任务是指linux能够同一时候运行几个任务. 进程简单来说就是执行中的程序,Linux系统 ...