子页面获取父页面的值

前一阵子在搞__postBack的时候用过子页面获取父页面方法,对于子页面如果获取父页面的值则有好多种方法。
这好像又回到了页面间传值的问题。在这里我顺便理一下。
对于页面间传值有多种方法:
1. 最常见的就是用超连接或者是Response.Redirect方法从一个页面转到另一个页面,这时候你在新页面中要获取父页面中的值时,必须是从URL中传值过来,也就是说使用Get方法传值的。这样传值有以下缺点:
   a)所传值必须跟在URL后面,这样的数据不安全。
   b)由于URL的长度有限,所以传的值也是有限的。
所以要想传递大量的数据,就必须用post来传值。因此我们想到了第二种传值的方式:
2. 用Server.transfer(URL) 来实现页面的跳转。
Server.transfer()与Response.Redirect最大的不同就是,Response.Redirect实际上就像在地址栏里面重新输入了要跳转页面的地址,所以他是不保存之前页面的信息的。但是Server.transfer()完全不同,Server.transfer()就是像是在服务器端重新显示你要转到的页面,但此前页面的信息都还保存在服务器。因此在新的页面上你仍可以得到之前页面的值。在.net中可以使用PreviousPage来得到之前页面的Page对象。这样有了Page对象你就方便的可以得到该页面上的任何值了。比如:我要找之前页面上的ID=TextBox1的值,语句为:
((TextBox)PreviousPage.FindControl("TextBox1")).Text

但是上面的两种方式都是转到,之前的页面就不显示了。有的时候还有打开子窗口但是父窗口仍然存在的情况,就像我在讲__postBack()方法中的那样,子窗口是在父窗口中弹出来的。
让子窗口从父窗口中弹出,很容易让人想到的是用JAVAScript方法。
打开一个窗口的JAVAScript方法有两种:window.open(); window.showdialog()
如果在使用这两种方法打开的子窗口中获取父窗口的值,当然也有两种把值跟在URL之后传过来和直接获取父窗口的对象来取值。
对于第一种方法取值,很简单。直接使用QueryString就可以取到了。但是如上面所说这种Get传值的方式有缺点。
下面我们分别来讨论下两种方法分别通过获取父页面对象来取值得方法。
1. 使用window.open(url)来打开一个子窗口,在子窗口中获取父窗口的对象其实很简单,直接使用window.opener就可以得到父窗口的对象,我们也是用这个方法在子窗口中调用父窗口的__postBack()方法的。比如我要获得父窗口中ID=“TextBox1”的textbox的值。代码如下:
<script language="javascript">
    
var text = window.opener.document.getElementById("TextBox1").value;
    alert(text);
</script>

2.使用window.showModalDialog()方法来弹出一个子窗口时,若想得到父窗口中的值,仍旧使用window.opener是得不到父窗口对象的。这里我们就要在showModalDialog()方法中传入window参数。然后在子窗口中得到这个代表父窗口的window,这样就可以随便操作父窗口中的值了。
脚本如下:
在父窗口中,假如我们是在服务器控件中调用javascript代码的,你可以这样写:
Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "window.showModalDialog('Default4.aspx',window)", true);
Default4.aspx就是子窗口的页面。这里要注意不能使用Page.ClientScript.RegisterClientScriptBlock()因为Block方法会把该script脚本写在所有控件的前面,这样在页面被加载时,TextBox1控件还没有被加载,子窗口就打开了,所以在子窗口时取不到任何控件的值的。而RegisterStartupScript()方法正好相反,他是把对应Script脚本写在所有控件的后面,所以子窗口能够得到父窗口的任何控件的值。
如果你是在客户端写的JavaScript脚本,那就更简单了
<script language="javascript">
    
function popwindow()
    
{
        window.showModalDialog(
'Default4.aspx',window);
    }

</script>


在子窗口中可写入如下脚本:
<script language="javascript">
       
var vwin = window.dialogArguments; //得到window参数
        var doc = vwin.document.getElementById("TextBox1").value; //获得TextBox的值
        alert(doc);
</script>
在 Web 开发中,**父页面获取页面**通常发生在使用 `window.open()` 打开一个窗口(弹出窗口)后,父页面需要从该窗口中获取某些数据的场景。 实现方式主要有以下几种: --- ### ✅ 方法一:通过 `window.opener` 实现页面父页面 #### 页面(child.jsp)代码: ```javascript // 假设页面有一个输入框,ID为"childInput" var valueToPass = document.getElementById("childInput").value; // 调用父页面定义的方法 window.opener.receiveValueFromChild(valueToPass); // 或者直接赋父页面的变量或表单元素 window.opener.document.getElementById("parentInput").value = valueToPass; // 关闭页面(可选) window.close(); ``` #### 父页面(parent.jsp)代码: ```javascript // 定义接收页面的方法 function receiveValueFromChild(value) { alert("收到页面:" + value); document.getElementById("parentInput").value = value; } // 打开页面 function openChildWindow() { window.open("child.jsp", "childWindow", "width=400,height=300"); } ``` --- ### ✅ 方法二:使用 `postMessage` 实现跨域通信(推荐现代浏览器使用) #### 父页面(parent.jsp)代码: ```javascript var childWindow; function openChildWindow() { childWindow = window.open("child.jsp"); } // 接收来自页面的消息 window.addEventListener("message", function(e) { if (e.origin !== "http://页面域名") return; // 安全校验 alert("父页面收到:" + e.data); document.getElementById("parentInput").value = e.data; }); ``` #### 页面(child.jsp)代码: ```javascript window.opener.postMessage("这是页面发来的", "*"); ``` --- ### ✅ 方法三:使用隐藏 iframe + window.parent(适用于嵌套页面) 如果你使用的是 `<iframe>` 嵌套页面,可以通过 `window.parent` 获取父页面对象。 #### 页面(iframe 中): ```javascript window.parent.document.getElementById("parentInput").value = "来自 iframe 的"; ``` --- ### ✅ 方法四:使用服务器端传(通过表单提交或 AJAX) 页面将数据提交到服务器父页面通过重新加载或 AJAX 请求从服务器获取最新数据。 ---
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值