[转]内嵌页面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 ...
随机推荐
- [原创][下载]Senparc.Weixin.MP-微信公众平台SDK（C#） - 已支持微信6.x API
因为正在计划做一个微信机器人,需要用ASP.NET,找了一下只有PHP的SDK,没有C#的,于是动手写了一个,已经全面支持微信6.x所有接口,包括多客服.卡券.微信支付等. 微信公众平台地址:http ...
- java.lang.IllegalStateException: Fatal Exception thrown on Scheduler.Worker thread.
最近在学习RxJava 感觉很happy ,happy的同时遇到不少问题 没办法一点一点来 上张帅图先 在使用RxJava + Retrofit 的时候 有时候接口请求参数不规范 比如 {} @For ...
- FZU 2237 中位数 主席树 树上k大
#include <cstdio> #include <cstring> #include <queue> #include <set> #includ ...
- Selenium 实现联想下拉框
直接在文本框输入字符,并不能实现联想下拉框, 第一种方式:强制执行js driver.FindElement(By.Id("top_search_input")).SendKeys ...
- Android 画直线并实现拖动
自定义View,在onDraw()方法中绘制一条直线,在onTouch()方法中监听手指的移动. public class AroundDragView extends View implements ...
- Docker系列(一)安装
操作系统版本:Centos7 Docker版本:1.8 设置安装源 1 cat > /etc/yum.repos.d/docker.repo << -EOF 2 [dockerr ...
- 【Java基础】Java多线程之线程组和线程池
在上一篇文章中,讲述了线程的基本概念和用法,这里将继续讲述线程组和线程池的一些东西. 线程组:java.lang.ThreadGroup 1. 线程组的介绍 线程组表示一个线程的集合.此外,线程组也可 ...
- 【转载】HBase 数据库检索性能优化策略
转自:http://www.ibm.com/developerworks/cn/java/j-lo-HBase/index.html 高性能 HBase 数据库 本文首先介绍了 HBase 数据库基本 ...
- repeater中后台动态为控件添加属性
在此贴出repeater中的ItemDataBound事件中的代码: private void ItemDataBound(object sender, RepeaterItemEventArgs e ...
- A Tour of Go Variables with initializers
A var declaration can include initializers, one per variable. If an initializer is present, the type ...