使用iframe框架传值时,子窗口无法直接获得父窗口的参数值

本文提供了一种方法,通过JavaScript脚本在子窗口中获取并使用来自父窗口的参数,解决了子窗口无法直接访问父窗口参数的问题。关键步骤包括解析URL查询字符串并提取所需参数,然后在子窗口中应用这些参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:问题描述:子窗口无法直接获得父窗口的参数值

二:解决方案

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>首页</title>
    <script language="javascript">

//写了一个Request["Parms"]获取参数小脚本,关键一
var Request = new Array();

function InitData()
{
  var s = window.location.href;
  var n = s.indexOf("?");
  if (n>=0)
 s = s.substring(n+1);

  var valuelist = s.split("&");
  for (var i=0; i < valuelist.length; i++)
  {
    var pair = valuelist[i].split("=");
    if (pair.length > 1)
    {
 Request[pair[0]] = pair[1];
    }
  }
}
function getID()
{
    InitData();
    parent.leftFrame.document.location.href="Navigate_Tree.aspx?HelpID="+Request["HelpID"]+"&CategoryID="+Request["CategoryID"];//该语句为关键语句,大家注意了,关键二
   
}
</script>
</head>
    <frameset rows="85,*" frameborder="yes" border="0" framespacing="0" scrolling="NO">
        <frame src="head.htm" name="topFrame" scrolling="yes" frameborder="yes" noresize>
        <frameset cols="350,*" border="0" frameborder="yes" framespacing="1" scrolling="NO" onload="getID()">
            <frame src='#' name="leftFrame" scrolling="NO">
            <frame id="rightFrame" name="rightFrame">
        </frameset>
    </frameset>  
</html>

注:如果遇到页面不断刷新情况,可作如下修改

解决办法由于使用onload()方法,会引起页面不短刷新,增加一个变量count进行控制即可 

//写了一个Request["Parms"]获取参数小脚本,关键一
var Request = new Array();

function InitData()
{
  var s = window.location.href;
  var n = s.indexOf("?");
  if (n>=0)
 s = s.substring(n+1);

  var valuelist = s.split("&");
  for (var i=0; i < valuelist.length; i++)
  {
    var pair = valuelist[i].split("=");
    if (pair.length > 1)
    {
 Request[pair[0]] = pair[1];
    }
  }
}
var count=0;//控制页面加载次数
function getID()
 {
    if(count==0){
      InitData();
      topFrame.document.location.href="top.jsp?ClInCode="+Request["ClInCode"];//该语句为关键语句,大家注意了,关键二
       iframepage.document.location.href="classMain.jsp?ClInCode="+Request["ClInCode"];
      count=count+1;
    }
   
   
} 

<think>好的,我现在要解决的问题是iframe页面接收页面递的token参数出现警告的问题。首先,我需要理解这个警告产生的原因。根据之前学过的知识,跨域的iframe通信可能会受到浏览器安全策略的限制,比如同源策略。如果页面页面不在同一个域下,直接通过URL参数递token可能会被浏览器拦截或发出警告,尤其是在使用postMessage方法如果没有正确验证来源,也可能导致安全问题。 接下来,我需要考虑解决方案。根据引用[1],提到了使用input劫持和ping属性,但ping属性主要用于跟踪链接点击,可能不太适用这里的情况。而引用[2]中提到的P3P头设置,虽然解决了Session丢失的问题,但可能和递token参数有关,尤其是跨域情况下的cookie问题。另外,引用[4]提到的一次性令牌和验证图片可能用于增强安全性,但这里的问题是如何正确递token,而不是防御攻击。 可能的解决方案包括: 1. **使用postMessage方法**:这是跨域通信的标准方法,页面通过postMessage发送token,页面监听message事件来接收。需要验证消息来源的域,避免安全问题。 2. **URL参数递**:将token作为URL参数附加到iframe的src属性中。但这种方式可能在浏览器控制台显示警告,尤其是当参数包含敏感信息,或者存在跨域问题。 3. **设置P3P头**:如引用[2]所述,在服务器响应中添加P3P头,解决跨域的cookie问题,可能帮助页面正确接收页面递的session或cookie中的token。 4. **使用片段标识符(Hash)**:将token放在URL的hash部分,因为hash不会发送到服务器,但可以在页面中通过JavaScript读取,避免参数暴露在服务器日志中。 5. **共享存储机制**:如使用localStorage或sessionStorage,结合postMessage来同步token,但需要考虑跨域存储的限制。 现在需要评估这些方法的适用性。例如,如果页面页面是同域的话,直接通过URL参数或cookie递即可,问题可能较小。但如果是跨域,postMessage会更安全可靠。同,设置P3P头可能解决某些浏览器的cookie拦截问题,特别是在旧版IE中。 另外,需要注意浏览器安全策略的更新,比如Chrome对SameSite属性的处理,可能会影响cookie的递。因此,确保token的递方式符合最新的安全标准也很重要。 最后,可能需要结合多种方法,比如使用postMessage递token,同在服务器端设置合适的CORS头和P3P头,确保跨域通信的安全性和可靠性。还要验证页面是否正确处理接收到的token,避免XSS或CSRF漏洞。</think>### 解决方案 #### 1. 使用 `postMessage` 安全通信 页面通过 `postMessage` 方法向页面跨域递 token,页面监听 `message` 事件接收数据。需验证消息来源的域名以防止恶意攻击。 **页面代码**: ```javascript const iframe = document.getElementById('myIframe'); iframe.onload = () => { iframe.contentWindow.postMessage( { token: '页面token' }, 'https://页面域名.com' ); }; ``` **页面代码**: ```javascript window.addEventListener('message', (event) => { if (event.origin !== 'https://页面域名.com') return; // 验证来源 const token = event.data.token; console.log('接收到的Token:', token); }); ``` #### 2. URL 参数递 + 服务端配合 将 token 作为 URL 参数附加到 iframe 的 `src` 属性,页面通过解析 URL 获取参数。需注意敏感信息暴露风险,建议结合 HTTPS 和短期有效的 token。 **页面代码**: ```html <iframe src="https://页面域名.com?token=abc123"></iframe> ``` **页面代码**: ```javascript const urlParams = new URLSearchParams(window.location.search); const token = urlParams.get('token'); ``` #### 3. 设置 P3P 响应头解决跨域 Cookie 问题 若通过 Cookie 递 token,需在页面服务端配置 P3P 头,解决部分浏览器(如旧版 IE)拦截跨域 Cookie 的问题[^2]。 **服务端示例(ASP.NET)**: ```csharp Response.AddHeader("P3P", "CP='CAO PSA OUR'"); ``` #### 4. 使用 Hash 片段避免参数泄露 将 token 放入 URL 的 Hash 部分,页面通过 JavaScript 读取,避免参数发送到服务端。 **页面代码**: ```html <iframe src="https://页面域名.com#token=abc123"></iframe> ``` **页面代码**: ```javascript const token = window.location.hash.split('=')[1]; ``` --- ### 关键注意事项 1. **安全性验证** - 使用 `postMessage` 务必验证 `event.origin`。 - 敏感 token 应加密输,避免明文暴露。 2. **浏览器兼容性** - P3P 头主要针对旧版 IE,现代浏览器可通过跨域资源共享(CORS)配置。 3. **短期有效 token** - 建议 token 设置较短有效期,降低泄露风险[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值