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 ...

随机推荐

Gitlab CR
Gitlab 进行 CR 的强限制,原理很简单. 实现起来,利用的是 git 自身的 custom_hooks 的支持,以及需要对 gitlab 做一点操作,对它的数据库开放一个只读权限的账号,来处理 ...
es6中...是什么意思。
1. var set = new Set([1, 2, 3, 4, 4,4,4,4,2,2,2]) set=[...set] 2. let [head, ...tail] = [1, 2, 3, 4] ...
zabbix3.4.7使用过程中常见错误
================================================================================================ 1.Z ...
34 char类型转换为int类型
#include<iostream> #include<cstdlib > using namespace std; int main() { char a=101; int ...
FS:[0] 链条
0x01 用户态在x86系统中,当线程在用户态执行时,段寄存器fs总是指向当前线程的TEB. 在Ntdll中有一个未公开的函数NtCurrentTeb() ,用来取得当前线程的TEB地址.FS:[ ...
SharePoint REST API - 使用REST接口对列表设置自定义权限
博客地址:http://blog.csdn.net/FoxDave SharePoint网站.列表和列表项都属于SecurableObject类型.默认情况下,一个安全对象继承父级的权限.对一个对 ...
入门项目 A5-1 interface-bank 第三方接口1
from db import db_handler # 提现接口 def withdraw_interface(name, money): # 定义提现接口,传入name与money参数 user_d ...
二,编程语言类别,和python变量基础
编程语言类别机器语言:由二进制组成,直接控制操作硬件,执行效率高,开发效率低. 汇编语言:用英文代替二进制,直接操作控制硬件,执行效率高,开发效率低. 高级语言: 编译型,如C语言,类似谷歌翻译,先 ...
将100道计算题输出至txt文件，再读取文件至控制台,在控制台中输入答案并评判对错
我在课堂上基本完成了输出100道题和创建文档,但是因为对输入输出流不熟悉,所以并没有实现将输出的计算题导出到文档里,在课下我又请教了宿舍的大佬,基本完成如下: 源代码: import java.io. ...
【开发遇到的问题】Spring Mvc使用Jackson进行json转对象时，遇到的字符串转日期的异常处理（JSON parse error: Can not deserialize value of type java.util.Date from String[）
1.问题排查 - 项目配置 springboot 2.1 maven配置jackson - 出现的场景: 服务端通过springmvc写了一个对外的接口,查询数据中的表,表中有一个字段属性是时间戳,返 ...

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

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

随机推荐

热门专题