iframe-父子-兄弟页面相互传值(jq和js两种方法)

参考文章：

http://blog.csdn.net/u013299635/article/details/78773207

http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html

父窗口代码

<body>
<iframe id="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
<iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>

1. 父窗口调用子窗口中的方法test方法

// js
document.getElementById("frame").contentWindow.test();
// jq
$("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]

2. 父窗口获取子窗口的值

$("#frame")[0].contentWindow.$("#dd").val()；或者 frame.window.$("#dd").val();

var t = document.getElementById('frame').contentWindow.document.getElementById('dd');

$(window.frames["iframe1"].document).find("#id").val();

3. 子窗口调用父窗口的方法

parent.ggMM();

4 兄弟窗口方法调用

iframe调用newFrame中的frameFn方法

// js
parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
// jq
parent.$("#newFrame")[0].contentWindow.frameFn();

5.兄弟窗口传值

iframe给newFrame传值

parent.$("#newFrame")[0].contentWindow.$('#nn2').val();

$("#newFrame",parent.document.body).contents().find("someID").val();

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

使用jquery操作iframe

1、内容里有两个ifame

leftiframe中jQuery改变mainiframe的src代码：
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")

2、如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到someID的内容

$("#mainiframe").contents().find("someID").html() html 或者 $("#mainiframe").contains().find("someID").text()值

3、在父窗口中操作选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")

4、如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()

使用JavaScript操纵iframe

框架间的互相引用

一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：

window.frames["frameName"];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

self.frames["frameName"]

self.frames[0]

frames[0]

frameName

每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用

知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用

如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

</frameset>

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

4．不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用

和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

1.父级html源码：

main.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>main</title>
<style type="text/css">
iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var gg="这是main.html变量";
function ggMM() {
console.log(gg);
}
function callIframeMethod() {
// js
document.getElementById("frame").contentWindow.test();
// jq
$("#frame")[0].contentWindow.test(); //用jquery调用需要加一个[0]
}
function callIframeField() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.ff);
console.log(frame.window.ff);
}
function callIframeHtml() {
// 以下两种方法可以达到同样的效果
console.log($("#frame")[0].contentWindow.$("#dd").val());
console.log(frame.window.$("#dd").val());
var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
console.log(t);
// var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
//console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
}
function giveParameter() {
$("#frame")[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="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
<iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>
</html>

2.子页面

frame.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>frame</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var ff="adfdasfdsafdsafdsaf";
function test() {
console.log($("#dd").val());
}
function callMainField() {
console.log(parent.gg);
}
function callMainMethod() {
parent.ggMM();
}
function callMainHtml() {
console.log(parent.$("#frame").attr("id"));
}
function getParameter() {
console.log(window.hellobaby);
}
function ss(){
console.log('这是frame方法');
console.log(ff)
}
</script>
</head>
<body>
<h1>frame</h1>
<a href="#" onClick="getParameter();">接受参数</a>
<a href="#" onClick="callMainMethod();">调用父级方法，并且打印父级变量</a>
<a href="#" onClick="callMainField();">调用主窗口变量</a>
<a href="#" onClick="callMainHtml();">调用子iframe组件</a>
<input id="dd" type="text" value="1111111111"/>
</body>
</html>

3.子页面中嵌套的页面

newFranme.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在frame里嵌套frame</title>
<style type="text/css">
input,a{display: block;line-height:30px;}
iframe{
float:left;
width:48%;height:250px;margin-top:40px;background:#abc;border:1px solid blue;
}
#newFrame2{ float:right; }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var newFrame = {
name:'这是newFrame的变量值',
};
function callLevelFrame() {
var ff=parent.$("#frame")[0].contentWindow.ff;
parent.$("#frame")[0].contentWindow.ss();
console.log('parent.$("#frame")[0].contentWindow.ff: '+ff);
}
function callLevelFrame1() {
console.log($("#newFrame1")[0].contentWindow.iframe1);
}
function frameFn(){
console.log('这是frame里面的方法franmeFn');
}
$(function(){
// setTimeout(function(){
// // console.log(parent.$("#frame"))
// // console.log(parent.$("#frame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('frame').contentWindow.ss());
// },500)
})
</script>
</head>
<body>
<h1>newFrame</h1>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>
<a href="#" onClick="callLevelFrame1();">调用自己的子页面iframe1变量</a>
<input id="nn" type="text" value="sdafsdfsa"/>
<iframe id="newFrame1" name="newFrame1" src="newFrame1.htm" frameborder="0"></iframe>
<iframe id="newFrame2" name="newFrame2" src="newFrame2.htm" frameborder="0"></iframe>
</body>
</html>

4.子页面的子页面中嵌套的页面

newFram1.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe1的变量';
function callnewFramFn() {
// js
parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
// jq
parent.parent.$("#newFrame")[0].contentWindow.frameFn();
}
function callnewFramParam(){
console.log(parent.parent.document.getElementById('newFrame').contentWindow.newFrame);
}
// $(function(){
// setTimeout(function(){
// // console.log(parent.parent.$("#newFrame")[0])
// // console.log(parent.$("#newFrame")[0].contentWindow.ss())
// // console.log(parent.document.getElementById('newFrame').contentWindow.ss());
// },500)
// })
function frame1(){
console.log(iframe1);
parent.$("#newFrame2")[0].contentWindow.$('#nn2').val(iframe1);
}
</script>
</head>
<body>
<h1>newFrame1</h1>
<a href="#" onClick="callnewFramFn();">调用newFram方法</a>
<a href="#" onClick="callnewFramParam();">调用newFram变量</a>
<input id="nn" type="text" value="这是newFrame1的input值"/>
</body>
</html>

5.子页面的子页面中嵌套的页面

newFram2.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe2的变量';
function callnewFramFn1() {
parent.$("#newFrame1")[0].contentWindow.frame1();
console.log(parent.$('#newFrame1'));
}
</script>
</head>
<body>
<h1>newFrame2</h1>
<a href="#" onClick="callnewFramFn1();">调用newFram1方法</a>
<input id="nn2" type="text" value="这是newFrame1的input值"/>
</body>
</html>

iframe-父子-兄弟页面相互传值(jq和js两种方法)的更多相关文章

原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一依靠正则表达式修改 1.获取obj的html2.统一替换 ...
div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
iframe父子兄弟之间调用传值(contentWindow && parent)
iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主要知识点 ...
Angular获取dom元素，以及父子组建之间相互传值
1.使用原生js代码获取dom元素在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...
uniapp内嵌H5页面和uniapp页面相互传值
最近项目有一个需求 -- 做一个百人抽奖的模块,要求展示百人的头像并且不断变化排列组合先展示一部分的用户头像,然后每增加一个用户就增加一个头像在百人排列里面我整一个gif图来展示一下大概就是这种 ...
JSP页面中的pageEncoding和contentType两种属性
关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容 ...
android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性
JSP页面中的pageEncoding和contentType两种属性本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...
利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...

随机推荐

946. Validate Stack Sequences验证栈序列
网址:https://leetcode.com/problems/validate-stack-sequences/ 参考:https://leetcode.com/problems/validate ...
hadoop之安装
在Linux环境下安装Hadoop: 一.安装环境硬件:虚拟机操作系统:Centos 6.4 64位 IP:192.168.153.130主机名:imooc安装用户:root ...
windows server下设置远程会话自动注销
通过远程桌面连接windows server服务器时,经常是直接关闭远程桌面程序,而没有注销远程登录的用户,这样导致有很多远程桌面启动的进程依然运行在服务器上,对服务器产生了不必要的开销,其实作为se ...
VSTO：使用C#开发Excel、Word【15】
使用文档属性DocumentProperties集合和DocumentProperty对象位于Microsoft Office 11.0 Object Library(office.dll)中,该对象 ...
python IDE PyCharm的安装
首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download : 选择Windows系统免费版本下载: 双击下载的安装包,进行安装 ...
1.配置OpenCV开发环境VS2010
Jmeter分布式及在Linux上执行jmeter脚本
Jmeter分布式主控机即自己的电脑,控制并发数压力机即别人的机器,和主控机一起添加压力 1.其他的压力机需要启动Jmeter-server.bat 启动成功页面 2.主控机的Jmeter 的bi ...
virsh命令和虚拟机克隆
virsh 命令 virsh list //列出正在运行虚拟机 virsh list --all //列出所有虚拟机 virsh console sunhao-1 //进入名字为sunh ...
团队项目（MVP------新能源汽车无线充电管理网站）（个人任务1）
个人任务:1.设计问卷调查了解电动车目前的市场需求情况 2.收集问卷,并且进行总结和分析 3.后台管理系统界面的登录和注册界面的编写(主要用到html,css,javascript,其中用户的合法性检 ...
git 本地重命名文件夹大小写并提交到远程分支
git branch 查看本地分支 git branch -a 查看本地本地分支可直接切换:git checkout name 进入正题: 1.文件夹备份 2.git config core.ign ...

iframe-父子-兄弟页面相互传值(jq和js两种方法)

iframe-父子-兄弟页面相互传值(jq和js两种方法)的更多相关文章

随机推荐

热门专题