怎样向iframe获取父页面变量script传递变量

博客分类:
javascript调用父窗口(父页面)的方法
window.parent与window.opener的区别 javascript调用主窗口方法1:
window.parent 是iframe页面调用父页面对象举例:a.html
&head&&title&父页面&/title&&/head&
&form name="form1" id="form1"&
&input type="text" name="username" id="username"/&
&iframe src="b.html" width=100%&&/iframe&
如果我们需要在b.htm中要对a.htm中的username文本框赋值,就如很多上传功能,上传功能页在Ifrmae中,上传成功后把上传后的路径放入父页面的文本框中我们应该在b.html中写
&script type="text/javascript"&
var _parentWin = window.
_parentWin.form1.username.value = "xxxx" ;
实例地址:
实例/a.html源码:1.a.html
&title&主页面&/title&
/** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
function parentInvokeIFrame()
var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以
alert(iframeTest.document.body.innerHTML);
alert(iframeTest.iFrameVair);
&form name="form1" id="form1"&
&input type="text" name="username" id="username"/&
&input type = "button" value = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/&
&iframe src="b.html" width = '100%' id = 'iframeTest'&&/iframe&
&title&&/title&
&script type="text/javascript"&
/** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
function UpdateParent()
var _parentWin = window.
_parentWin.form1.username.value = "xxxx" ;
function childInvokeParent()
var parentVairous = window.parent.window.parentV
alert(parentVairous);
&form name="form1" id="form1"&
&p align="center"&
&input type = "button"
name = "button"
id = "button"
value = "更新主页面的UserName内容"
onclick = "UpdateParent()"&
&input type = "button"
name = "button2"
id = "button2"
value = "测试IFrame子窗口调用父窗口的全局变量"
onclick = "childInvokeParent();"/&
ps:不能跨域获取,例如iframe的src是'http://www.xxx.ccc/'就不可以
window.opener 是window.open 打开的子页面调用父页面对象实例地址:
实例/a.html
源码:2.a.html
&title&主页面&/title&
&script type="text/javascript"&
/** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */
var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
因为不同于IFrame(IFrame有id,window.open()与IFrame的父子窗口的模式不同),
所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象
当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
function openSubWin()
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');
function parentInvokeChild()
if(OpenWindow)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常
alert(OpenWindow.iFrameVair);
&form name="form1" id="form1"&
&input type="text" name="username" id="username"/&
&input type="button" value="弹出子页面" onclick = "openSubWin()"&
&input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()"&
&title&子页面&/title&
&script type="text/javascript"&
/** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */
var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";
function UpdateParent()
var _parentWin = window.
_parentWin.form1.username.value = "xxxx" ;
function childInvokeParent()
var parentVairous = window.opener.window.parentV
alert(parentVairous);
&form name="form1" id="form1"&
&p align="center"&
&input type="button"
onclick = "UpdateParent();"
name="button"
id="button"
value="更新主页面的UserName内容"&
&input type = "button"
name = "button2"
id = "button2"
value = "测试IFrame子窗口调用父窗口的全局变量"
onclick = "childInvokeParent();"/&
经过hanjs的提醒,确实需要注意的是,模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的。例如修改:OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');为:OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");在子窗口中当希望修改父窗口中的内容时,会弹出“某某”为空或不是对象的错误,而这里的“某某”就是你想修改的父窗口中的内容
浏览 20605
论坛回复 /
(6 / 85260)
holdbelief 写道楼上说的太对了,需要注意,又学了一招
to "模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的"
好像在ie下可以引用吧,,可以在showModalDialog里将父页面 的句柄传过去..然后就可在模态窗口里操作了...
如下:
window.dialogArguments.dealreturnValue(returnValue);
dealreturnValue是父窗口里定义的方法..
哥们,你没有好好看理解我说的意思。
传过去一个句柄操作父窗口的数据没有问题。你自己可以动手做一下,能否用location或submit来提交刷新父窗口???
楼上说的太对了,需要注意,又学了一招to "模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的"
好像在ie下可以引用吧,,可以在showModalDialog里将父页面 的句柄传过去..然后就可在模态窗口里操作了...
如下:
window.dialogArguments.dealreturnValue(returnValue);
dealreturnValue是父窗口里定义的方法..
holdbelief
浏览: 531564 次
来自: 北京
只有配置文件,没有代码么大神
如果ActiveMQ服务器没有启动,这个时候消息生产者使用Jm ...
顶1楼, 引用文件, 配置属性, 太方便了
说得清楚明白
总结的很好。受益了
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'JavaScript子窗口调用父窗口变量和函数的方法
转载 & & 作者:w
这篇文章主要介绍了JavaScript子窗口调用父窗口变量和函数的方法,涉及JavaScript窗口调用的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法。分享给大家供大家参考。具体如下:
示例1:子窗口是新打开的窗口
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns=" http://www.w3.org/1999/xhtml"&
&title&parent&/title&
&script type="text/javascript"&
var parentPara='parent';
function parentFunction() {
alert(parentPara);
&button onclick="parentFunction()"&显示变量值&/button&
&button onclick="window.open('child.html')"&打开新窗口&/button&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns=" http://www.w3.org/1999/xhtml"&
&title&child&/title&
&script type="text/javascript"&
function modify() {
opener.parentPara='child';
&button onclick="opener.parentFunction()"&调用父页面的方法&/button&
&button onclick="modify()"&更改父页面中变量的值&/button&
只要在变量和函数前面加opener就可以访问指定资源了。
但是当父窗口被关闭时,再如此使用会报一个错:"被调用的对象已与其客户端断开连接。"
示例2:子页面是父页面的一个iframe
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns=" http://www.w3.org/1999/xhtml"&
&title&parent&/title&
&script type="text/javascript"&
function fill() {
//alert(frame1.window.childPara);
//显示frame1内的变量值
var str=document.getElementById('txt1'). //获得文本框内输入的值
frame1.window.div1.innerHTML= //将值填入子页面的一个div中
&div style="background-color:width:300height:300"&
&iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"&&/iframe&
&br/&&br/&&br/&&br/&
&input id="txt1" type="text"/&
&button onclick="fill()"&将文本框内值填充入子界面&/button&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns=" http://www.w3.org/1999/xhtml"&
&title&child&/title&
&script type="text/javascript"&
function fun() {
parent.fill();
&div style="background-color:width:100height:100"&
&b&子页面&/b&&br/&
&a href="#" onclick="fun()"&同父页面按钮&/a&
&div id="div1" style="color:"&
小发现:刷新父页面时,其中的iframe也会随之刷新;刷新iframe时,父页面不会刷新。
希望本文所述对大家的JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具javascript静态页面传值的三种方法分享
转载 & & 作者:
这篇文章介绍了javascript静态页面传值的三种方法及优缺点,有需要的朋友可以参考一下
一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 代码如下:&input type="text" name="username"&&input type="text" name="sex"&&input type="button" value="Post"&&script language="javascript" &function Post(){//单个值 Read.htm?username=//多全值 Read.htm?username=baobao&sex=  url = "Read.htm?username="+escape(document.all.username.value);url += "&sex=" + escape(document.all.sex.value);location.href=}&/script&Read.htm
代码如下:&script language="javascript" &/**--------------- Read.htm -----------------* Request[key]* 功能:实现ASP的取得URL字符串,Request("AAA")* 参数:key,字符串.* 实例:alert(Request["AAA"])*--------------- Request.htm -----------------*/var url=location.var Request = new Object();if(url.indexOf("?")!=-1){var str = url.substr(1) //去掉?号  strs = str.split("&");for(var i=0;i&strs.i++){&  Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);}}alert(Request["username"])alert(Request["sex"])&/script&&script language="JavaScript"&&!--function Request(strName){var strHref = "www.jb51.net/index.htm?a=1&b=1&c=测试测试";var intPos = strHref.indexOf("?");var strRight = strHref.substr(intPos + 1);var arrTmp = strRight.split("&");for(var i = 0; i & arrTmp. i++){var arrTemp = arrTmp[i ].split("=");if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];}return "";}alert(Request("a"));alert(Request("b"));alert(Request("c"));//--&&/script&&script&String.prototype.getQuery = function(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = this.substr(this.indexOf("?")+1).match(reg);if (r!=null) return unescape(r[2]);}var str ="www.jb51.net/index.htm?a=1&b=1&c=测试测试";alert(str.getQuery("a"));alert(str.getQuery("b"));alert(str.getQuery("c"));&/script&
优点:取值方便.可以跨域.缺点:值长度有限制
二:JavaScript静态页面值传递之Cookie篇Cookie是浏览器存储少量命名数据.它与某个特定的网页或网站关联在一起.Cookie用来给浏览器提供内存,以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.Post.htm 代码如下:&input type="text" name="txt1"&&input type="button" value="Post"&&script language="javascript" &function setCookie(name,value){/**--------------- setCookie(name,value) -----------------* setCookie(name,value)* 功能:设置得变量name的值* 参数:name,字符串;value,字符串.* 实例:setCookie('username','baobao')*--------------- setCookie(name,value) -----------------*/var Days = 30; //此 cookie 将被保存 30 天  var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();location.href = "Read.htm"; //接收页面.}&/script&
代码如下:&script language="javascript" &function getCookie(name){/**--------------- getCookie(name) -----------------* getCookie(name)* 功能:取得变量name的值* 参数:name,字符串.* 实例:alert(getCookie("baobao"));*--------------- getCookie(name) -----------------*/var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));if(arr !=null) return unescape(arr[2]);}alert(getCookie("baobao"));&/script&
优点:可以在同源内的任意网页内访问.生命期可以设置.缺点:值长度有限制.
三:JavaScript静态页面值传递之Window.open篇这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.Post.htm
代码如下:&input type=text name=maintext&&input type=button value="Open"&Read.htm&script language="javascript" &//window.open打开的窗口.//利用opener指向父窗口.var parentText = window.opener.document.all.maintext.alert(parentText);&/script&
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具javascript怎样实现从子页向父页传递参数?
[问题点数:50分,结帖人xwk789xwk]
javascript怎样实现从子页向父页传递参数?
[问题点数:50分,结帖人xwk789xwk]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2008年8月 MS-SQL Server大版内专家分月排行榜第一2008年7月 MS-SQL Server大版内专家分月排行榜第一
2015年6月 MS-SQL Server大版内专家分月排行榜第二
匿名用户不能发表回复!|> 博客详情
摘要: HTML中传递和引用JavaScript变量,使用技术点如下:
1,document对象的getElementById方法得到HTML元素.
2,HTML元素的value值属性得到HTML元素的value值.
3,HTML元素的value值属性可以设置变量的值.
&title&在HTML中传递和引用JavaScript变量&/title&&
&script&type="text/javascript"&&
&&var&&//全局变量声明&
&&function&passvar(){&
&&&&foobar&=&document.getElementById('textfield').&
&&&&//document.write('传递变量成功');&
&&&&alert('传递变量成功!');&
&//显示变量&
&function&displayvar(){&
&&&alert('变量值为:'+foobar);&
&//引用变量&
&function&varpass(){&
&&&&document.getElementById('textdispaly').value&=&&&
&&&&//foobar&=&document.getElementById('textdispaly').value&;&
&/script&&
&h1&在HTML中传递JavasScript变量&/h1&&hr&&br&&
&h5&单击相应按钮...&/h5&&
&&form&name="form1"&method="post"&action=""&&
&&&label&&
&&&&input&type="text"&name="textfield"&id="textfield"&&
&&&/label&&
&&&label&&
&&&!--绑定&onclick事件&--&&
&&&input&type="button"&name="button1"&value="传递变量"&onclick="void&passvar();"&&/span&&
&&&/label&&
&&&label&&
&&&&!--绑定&onclick事件&--&&
&&&input&type="button"&name="button2"&value="显示变量"&onclick="void&displayvar();"&&/span&&&
&&&/label&&
&&&label&&
&&&&input&type="text"&name="display"&id="textdispaly"&&
&&&/label&&
&&&label&&
&&&&!--绑定&onclick事件&--&&
&&&&input&type="button"&name="button3"&value="引用输入变量"&onclick="void&varpass();"&&/span&&&
&&&/label&&
&/center&&
原文来自:
http://ivantian2008.blog.51cto.com/7456
支付宝支付
微信扫码支付
打赏金额: ¥
已支付成功
打赏金额: ¥

我要回帖

更多关于 获取父页面变量 的文章

 

随机推荐