winney

It is never too old to learn.

0%
winney

HTML页面之间传参-iframe父子页面传参

发表于 更新于 分类于

A域名下的参数传给B域名下的页面

场景1：推广页面要求一定要使用A域名，而推广页面的网页内容是在B域名下，而B域名推广页需要从A域名的推广链接上获取参数。

这里是填写的推广链接是A域名下的，但是实际用户访问的页面是B域名下的game.html页面

例如：

A域名的推广链接：http://A.com/iframeParentPage.html?app_id=70116&user=admin&age=18

B域名推广页面：http://B.com/game.html?game_id=10002&platform_id=205&type=game

A、B域名在不同的主体下，不能把B域名下的页面放到A域名的服务器上。

B域名需要拿到app_id等参数。

  1. A域名下iframeParentPage.html中获取参数：window.location.search

    1
    console.log(window.location.search);	// ?app_id=70116&user=admin&age=18

  2. 携带A域名下iframeParentPage.html中的参数，进行页面跳转

    1
    window.location.href = "http://B.com/game.html?game_id=10002&platform_id=205&type=game&" + window.location.search.substring(1);

    备注：

    1. 使用window.location.search.substring(1);是要把?去掉

    2. 要在type=game后面加上&

  3. 在B域名下的game.html页面中获取参数

    1
    2
    3
    4
    5
    6
    const queryParams = new URLSearchParams(window.location.search);
    console.log('queryParams');
    console.log(queryParams);
    console.log(queryParams.get('app_id'));
    console.log(queryParams.get('user'));
    console.log(queryParams.get('age'));

    iframe嵌套页面-父子页面传参

查询字符串（URL 参数）

场景2：推广页面要求一定要使用A域名，而推广页面的网页内容是在B域名下，而B域名推广页需要从A域名的推广链接上获取参数。

这里是填写的推广链接是A域名下的，但是实际用户访问的页面是A域名下iframe嵌套了B域名下的game.html的页面，也就是URL中显示的是A域名

A域名下的页面：

1
<iframe title="游戏页面" src="" frameborder="0"></iframe>
1
document.querySelector('iframe').src= "http://A.com/iframeParentPage.html?app_id=70116&user=admin&age=18&" + window.location.search.substring(1);

B域名下的页面：

1
2
3
4
5
6
const queryParams = new URLSearchParams(window.location.search);
console.log('queryParams');
console.log(queryParams);
console.log(queryParams.get('app_id'));
console.log(queryParams.get('user'));
console.log(queryParams.get('age'));

同域名下-使用缓存

A页面：

1
localStorage.setItem('params', window.location.search.substring(1));

B页面：

1
2
3
4
5
6
var params = localStorage.getItem('params');
console.log(params);
const queryParams = new URLSearchParams(params);
console.log(queryParams.get('app_id'));
console.log(queryParams.get('user'));
console.log(queryParams.get('age'));

注意：不同域名，使用这个方法不可以。

根据需要，使用localStorage或sessionStorage