向框架中的页面传递参数

最近在bbs中,经常看到要求向框架页面中传递参数,试了以下。给点事例代码:

     在框架外部页面test.aspx中,这样使用的url链接地址: string urlstr="index.aspx?para1="+para1;para1是参数,向框架页index.aspx 中的frame_rightdown框架传递参数。

  我的框架集index.aspx

<FRAMESET border="0" frameBorder="0" frameSpacing="0" rows="33,*">
  <FRAME name="frame1"  src="frame1.aspx" >
    <FRAMESET rows="*" cols="150,*" id="myFrame">
           <FRAME name="frame_leftdown" src="frame_leftdown.aspx" >
           <FRAME name="frame_rightdown"src="frame_rightdown.aspx?para1=<%=Request.QueryString["para1"]%>
       </FRAMESET>
 </FRAMESE

这样即可在frame_rightdown.aspx中接受并处理参数。

 

 

在HTML,父页面向iframe框架页面传递参数可以通过设置iframe的src属性或使用JavaScript来实现。以下是两种常见的方法: 1. 使用URL参数传递: 在父页面,可以通过在iframe的src属性加入查询字符串(query string)来传递参数。例如: ```html <iframe src="child_page.html?param1=value1&param2=value2" ...></iframe> ``` 在iframe框架的child_page.html页面里,可以通过JavaScript来获取这些参数: ```javascript function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); if (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } return null; } var param1 = getQueryVariable('param1'); // 获取param1的值 var param2 = getQueryVariable('param2'); // 获取param2的值 ``` 2. 使用JavaScript的window.postMessage方法: HTML5引入了window.postMessage方法,它提供了一种安全的方式来实现跨源通信,即允许一个页面和另一个“不同源”的页面进行通信。父页面和iframe页面可以约定一个事件监听和触发机制来传递参数。 父页面向iframe发送消息: ```javascript var iframe = document.getElementById('iframeId'); var iframeWindow = iframe.contentWindow; iframeWindow.postMessage({param1: 'value1', param2: 'value2'}, '*'); ``` iframe页面接收消息: ```javascript window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { var data = event.data; if (data.param1) { console.log(data.param1); // 使用param1的值 } if (data.param2) { console.log(data.param2); // 使用param2的值 } } ``` 在使用postMessage时,必须确保接收和发送页面遵守相同的安全协议和端口,否则postMessage会失败。通常需要在iframe页面和父页面上都设置消息监听器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值