父窗口子窗口问题搜集

最新推荐文章于 2023-01-03 09:56:48 发布
最新推荐文章于 2023-01-03 09:56:48 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 9.JS+AJAX 7.HTML+CSS 文章标签： iframe javascript function input features mobile
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thomas_chen/article/details/1728925
版权

根据iframe里页面的内容来控制父窗口iframe高度

在包含的IFrame页面里：
<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1>
<TR>
 <TD>
<iframe id=zz src="a.asp" height=100% scrolling=no></iframe></TD>
</TR>
</TABLE>


在a.asp里加上这些代码：
<SCRIPT LANGUAGE=javascript>
<!--
window.οnlοad=function(){
var ptd = window.parent.document.getElementById("zz");
ptd.style.height = document.body.scrollHeight;
}
//-->
</SCRIPT>

 

 

IFRAME内控制父窗口的另一个IFRAME

parent.window.frames['aaa'].document.getElementById("bbb").innerHTML="11111";

 Javascript 中父窗口与子窗口的交互

Javascript:

  1. <script type= "text/javascript">
  2. <!--
  3. function openWindow ( )
  4. {
  5.     newWindow = window. open ( '', 'newWindow', 'height=300,width=300,scrollbars=auto' );  
  6.     if (newWindow != null )
  7.     {
  8.        var windowHTML= "<html><head><title>preview</title></head>";
  9.        windowHTML += "<body><h1 align='center'>";
  10.        windowHTML += "这是子窗口!</h1><hr><div align='center'><form action='#' method='get'>";
  11.        windowHTML += "<input type='button' value='将父窗口的背景设为红色' οnclick='window.opener.document.bgColor=/"red/";' /><br>";
  12.        windowHTML += "<br ><input type='button' value='关闭' οnclick='self.close();' />";
  13.        windowHTML += "</form></div></body></html>";
  14.  
  15.        newWindow. document. write (windowHTML );
  16.        newWindow. focus ( );
  17.     }
  18. }
  19. //-->
  20. </script>

HTML:

  2. <input value='打开子窗口' onclick="openWindow();" type="button">
  3.  
  4. <input type="button" value="将子窗口的背景设为蓝色" onclick="if (window.newWindow){newWindow.document.bgColor='blue';newWindow.focus();}" />
  5.  

父窗口调用子窗口

 

父窗口与子窗口的数据传递问题

我权且把原始窗口叫父窗口,把从该窗口打开或弹出的窗口或对话框叫子窗口.当然打开子窗口可用window.open()或window.showModalDialog()[与window.showModelessDialog()类似].若想将父窗口的数据传递到子窗口可用URL后带请求字符串即"?id1=qurey1&id2=query2",在子窗口中用window.location.search来获取该请求字符串.再利用字符串分割便可获得数据.

下面通过例子来说一下,子窗口向父窗口传递数据.首先是使用window.open()方法打开的窗口.
主窗口中主要是

<scrīpt type="text/Javascrīpt">
<!--
function MM_openSubWin(theURL,winName,features)
{
   window.open(theURL,winName,features);
}
//-->
</scrīpt>

<form name="form1" id="form1">
<table width=300" border="0" align="center" cellpadding="0" cellspacing="0" align="center">
<tr>
 <td width="100">测试输入框</td>
 <td ><input name="to_mobile" type="text" id="to_mobile" value="" size="20" maxlength="11"> </td>
</tr>
<tr>
<td height="20" colspan="2">
<a href="#" ōnClick="MM_openSubWin('subwin.htm','测试子窗口1','width=450,height=300')"><font color="#FF6600">测试子窗口1</font></a>
</td>
 </tr>
 </table>  
 </form>

这里主要有个window.open().它很简单,有三个主要参数,第一个是打开子窗口的URL;第二个是打开子窗口的名字,可选;第三个是设置大小,工具条等,可选.

子窗口中代码主要是

<scrīpt type="text/Javascrīpt">
<!--
function ConfirmSelection_onclick()
{
  var strCallNumbers = new String();
  strCallNumbers = document.form2.mobile.value;
  window.parent.opener.document.form1.to_mobile.value = strCallNumbers;
}
//-->
</scrīpt>

<table width="300" height="26" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td width="100">测试数据输入</td>
 <td >  <input name="mobile" type="text" id="mobile" value="" size="20" maxlength="11">
 </td>
</tr>
<tr> 
 <td height="12" colspan="3" bgcolor="#FFFFFF">
  <input type="submit" value="确定1" id="ConfirmSelection" name="ConfirmSelection" ōnclick="ConfirmSelection_onclick();window.close();">
  </td>
</tr>
 
</table>
</form>

这里主要是window.parent.opener,parent获取对象层次中的父窗口;opener设置或获取创建当前窗口的窗口的引用.使用它就可以对父窗口进行传值.

第二种方法是使用弹出对话框来实现.父窗口的代码主要有:

<scrīpt type="text/Javascrīpt">
<!--
function MM_showSubWin(theURL,varName,features)
{
  //window.showModalDialog(theURL,varName,features);
  window.showModelessDialog(theURL,varName,features);
}
//-->
</scrīpt>

<form name="form1" id="form1">
<table width=300" border="0" align="center" cellpadding="0" cellspacing="0" align="center">
<tr>
 <td width="100">测试输入框</td>
 <td ><input name="to_mobile" type="text" id="to_mobile" value="" size="20" maxlength="11"> </td>
</tr>
<tr>
 <td height="20" colspan="2">
  <a href="#" ōnClick="MM_showSubWin('subwin.htm',window,'')"><font color="#FF6600">测试子窗口2</font></a>
 </td>
</tr>
</table>  
</form>

这里主要涉及window.showModalDialog()和window.showModelessDialog().二者的功能类似,都是打开指定的对话框,主要区别是:
  showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响.
注意为了省事,传递变量名时直接将"window"传递过去,即showModalDialog("URL",window,"")

而子窗口对话框代码主要是

<scrīpt type="text/Javascrīpt">
<!--
function ConfirmSelection_onclick2()
{
  var strCallNumbers = new String();
  strCallNumbers = document.form2.mobile.value;
  window.dialogArguments.document.form1.to_mobile.value = strCallNumbers;
}
//-->
</scrīpt>

<table width="300" height="26" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td width="100">测试数据输入</td>
 <td >  <input name="mobile" type="text" id="mobile" value="" size="20" maxlength="11">
 </td>
</tr>
<tr> 
 <td height="12" colspan="3" bgcolor="#FFFFFF">
  <input type="submit" value="确定2" id="ConfirmSelection2" name="ConfirmSelection2" ōnclick="ConfirmSelection_onclick2();window.close();">  </td>
</tr>
 
</table>
</form>

你如果不想要对话框链接时不弹出新窗口就在<head />中添加<base target="_self">代码.这里传递数据用到了window.dialogArguments,它用来设置或获取传递给模式对话框窗口的变量或变量数组.


iframe_ID.iframe_document_object.object_attribute = attribute_value
例子
onClick="iframe_text.myH1.innerText='http://www.02dz.cn';"
子窗口调用父窗口
parent.parent_document_object.object_attribute = attribute_value
例子
οnclick="parent.myH1.innerText='http://www.02dz.cn';"

上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是
父窗口调用子窗口
window.frames["iframe_ID"].document.getElementById("iframe_document_object"­).object_attribute = attribute_value
例子
window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://www.02dz.cn";
子窗口调用父窗口
parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例子
parent.document.getElementById("myH1").innerHTML = "http://www.02dz.cn";

 

 子窗口更改父窗口元素

父窗口

<SCRIPT language=javascript>
  function PopupCatSel()
  {
   var selProdWnd=window.open("/member/tradeinfo/select_sort.asp","new","resizable=yes,width=580,height=320,top=0,scrollbars=yes");
   if(selProdWnd.opener== null)
   selProdWnd.opener = self;
   return (false);
  }
</SCRIPT>

子窗口

<SCRIPT LANGUAGE="JavaScript">
function retForm(sortid,type3id,sortname,typeid,typename1,type3name)
{ 
 if (!opener) return true;
 opener.document.forms[0].sortid.value = sortid;
 if (!opener) return true;
 opener.document.forms[0].typeid.value = typeid;
 if (!opener) return true;
 opener.document.forms[0].type3id.value = type3id;
 if(opener.document.forms[0].cat_sel_name)
 opener.document.forms[0].cat_sel_name.value = sortname+ " >> "+ typename1+ " >> "+ type3name;
  opener.document.forms[0].cat_sel_name1.value = sortname+ " >> "+ typename1+ " >> "+ type3name;
 self.close();
 return false;
}
</SCRIPT>

 

关于window.opener的用法

window.opener 的用法
    window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：
    
    window.opener.document.getElementById("name").value = "输入的数据";
    
    
    对于javascript中的window.opener没有很好的理解。
    为什么框架中不能使用，弹出窗口的父窗口不能在框架里面的某个页面呢？那怎样通过弹出窗口操作框架中的父窗口呢？
    
    opener.parent.frames['frameName'].document.all.input1.value 试试这个：）

Thomas_Chen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
parent.fraInterface.afterSubmit()
bkhech的专栏
08-29 6169
fraInterface是自己定义的一个frame的名字,是通过在frame标签中设置name属性实现的. 以上那句代码就是通过parent这个公共接口在各个frame间交互信息，也就是调用拥有同一个父亲的名为franInterface的frame中的afterSubmit()方法.
parent.fraInterface.xxxxxx
weixin_33810302的博客
03-08 842
fraInterface是自己定义的一个frame的名字,是通过在frame标签中设置name属性实现的.以上那句代码就是通过parent这个公共接口在各个frame间，也就是调用拥有同一个父亲的名为franInterface的frame。 转载于:https://www.cnblogs.com/liuhappy/p/10496799.html...
JS/JQUERY（6）——JS中window对象的top，parent，opener含义
weixin_30251829的博客
04-05 565
1.top 　　该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。　　/**　　 *　打开新的子页面　　 */　　var url = "./LoadAssetCard.jsp"; openWindow(strjsp);　　/**　　 *　子页面返回父页面，并将value返回父页面的 afterQuery()方法中　　 */　　var...
说一说window.parent
xinfei0803的专栏
08-01 5037
标签是很常用的，嵌在页面之中，可以做独立的加载和刷新。比如说，页面分左右或者上下结构，一般左侧和上侧是导航部分，右侧和下侧是目标页面的展示部分，只需要设置导航链接的target属性等于右侧iframe的name属性即可。 有一个需求，当session超时之后，无论点击任何的链接，都要使整个页面跳转至登陆页面。 以前未接触框架的时候，一般使用过滤器Filter来实现，过滤所有的url，当然对于登
JS中的Window对象、Parent对象、Frame对象、Document对象和Form对象
我的博客
11-04 5487
$(function() { // window.parent.document.form名.xx.value='xxxxx'; // window可省略。 parent.document.form名.xx.value='xxxxx'; // parent.document.getElementById("xx").value='xxxxx'; console.log(window);
Chrome下ifame父窗口调用子窗口的问题示例探讨
09-03
主要介绍了Chrome下ifame父窗口调用子窗口的问题,需要的朋友可以参考下
jquery 子窗口操作父窗口的代码
10-29
jquery 子窗口操作父窗口的实现代码。
JavaScript实现弹出子窗口并传值给父窗口
10-25
主要介绍了JavaScript实现弹出子窗口并传值给父窗口,方法很简单，这里推荐给大家，需要的朋友可以参考下
JavaScript中的子窗口与父窗口的互相调用问题
10-20
本文给大家介绍了JavaScript中的子窗口与父窗口的互相调用问题，非常不错，具有参考借鉴价值，需要的朋友参考下吧
js 父窗口控制子窗口的行为-打开，关闭，重定位，回复
10-29
技术要点可以利用windows的open和closed来对子窗口的控制,需要父窗口和子窗口之间进行互动。
Window iframe
Talents come from diligence
11-18 1375
许多初学者在处理 frame 时往往会出现这样或那样的错误，其实，frame 是一个特殊的窗口类型，只要明白了他们之间的关系，可以很容易控制，本文摘译自 JavaScript 2.0-The Complete Reference 一书的英文第二版（仅摘录了对理解 frame 有直接关系的章节），文章详细介绍了 frame ，相信对新手理解 frame 会有很大帮助。 对 window 和 f
父页面通过parent无法找到问题_江南春008_新浪博客
jjh0901的博客
07-01 412
前几天遇到这样一个问题，在一个iframe框架中的弹出层，通过parent无法找到父页面。 报错提醒：parent属性无效 原因是：在调用parent寻找父页面前，有一句关闭弹出层的语句，导致下面的parent无效 解决方法：调换关闭和寻找父页面的语句，即寻找父页面在前，关闭弹出层在后 ...
iframe子页面操作父页面
m0_62089210的博客
11-09 1527
测试弹出层日志查看二级菜单主页
iframe父子页面相互调用js方法
yunliupan的专栏
11-29 754
当父页面和子页面都属于同一个域下，那么它们之间js方法是可以相互调用的。在调用方法前指定function所属对象即可，父页面获取iframe所属对象方法为：iframe的name.window,iframe页面获取父页面的对象为parent的。具体例子如下： 父页面：parent.html parent     function parentFunction() {
你不知道的window.frameElement
liuhao9999的博客
11-19 817
概述 返回嵌入当前window对象的元素(比如<iframe>或者<object>),如果当前window对象已经是顶层窗口,则返回null. 语法 var frameEl = window.frameElement; 例子 var frameEl = window.frameElement; // 如果当前窗口被包含在一个框架里面,则将该框架的地址跳到'http://mozilla.org/' if (frameEl) frameEl.src = 'htt...
JavaScript总结
xqhys的博客
01-28 325
1、父页面和子页面 1.window.opener：谁打开我的； 2.window.parent：当前页面的父窗口； 3.window.parent.frames[“name值”]：获取内嵌浏览器对象; 例：var h =window.parent.frames[“name值”]; h.jquery方法；（可以给内嵌浏览器传递参数）; 2、判断null、undefined与NaN的方法...
[同域] iframe子页面调用父页面、父页面调用子页面javascript函数的方法
itchiang的专栏
07-09 1632
1、iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数，就写成： window.parent.a();   2、iframe父页面调用 子页面js函数 这个就稍微复杂一些，下面的方法支持ie和firefox浏览器： document.getElementById('ifrtest').co
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
weixin_49295874的博客
01-03 1810
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题内嵌 iframe 页面，一般使用 window.parent 或 window.top 来获取父页面的 window 对象在子页面 想使用(或传递给) 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。
父窗口与子窗口
最新发布
05-28
子窗口则是被嵌入到`iframe`元素中的页面，也就是在父窗口中显示的另一个页面。 父窗口和子窗口之间可以通过JavaScript代码来进行交互。在子窗口中，可以通过`parent`对象来访问父窗口中的JavaScript对象和方法。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值