Tips:
除了使用 URL片段标识符(#部分)传值,还可以使用 URL查询参数(?部分)传值,通过location.search
获取。
- a.html(http://aaa.com/a.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<iframe id="pageB" src="http://bbb.com/b.html" style="display: none;"></iframe>
<script>
// 递归函数,提供给 c.html 调用(同域)
function callback(retval) {
console.log(retval);
}
var count = 0; // 计数器
// 获取 iframe 标签并存储 url
var pageB = document.querySelector('#pageB');
var url_B = pageB.src;
// 每隔3秒向 b.html 传递 location.hash 值
var timer = setInterval(function() {
if (count < 5) {
// 随机数触发 hash 变动(该页只用于触发 b.html hashchange事件,传值会暴露出来)
pageB.src = url_B + '#' + Math.random();
count++;
} else {
clearInterval(timer);
}
}, 3000);
</script>
</body>
</html>
- b.html(http://bbb.com/b.html)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<iframe id="pageC" src="http://aaa.com/c.html" style="display: none;"></iframe>
<script>
// 获取 iframe 标签并存储 url
var pageC = document.querySelector('#pageC');
var url_C = pageC.src;
// hashchange事件监听 hash 变化
window.addEventListener('hashchange', function() {
// hash 只能传递字符串(强制转换)
var data_Str = '来自b.html'; // 中文会被 url 转义
// 传递数据,并且附上随机数来改变 hash
pageC.src = url_C + '#' + data_Str + '{%' + Math.random() + '%}';
// 使用 {%...%} 方便被 c.html 过滤
}, false)
</script>
</body>
</html>
- c.html(http://aaa.com/c.html)【proxy】
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<script>
var pageA = window.parent.parent; // 父窗口的父窗口,此处即 a.html
var count = 0; // 计数器
// hashchange事件监听 hash 变化
window.addEventListener('hashchange', function() {
count++;
// 首先过滤掉 {%...%} 随机数段,再进行解码(字符串被 url 转码)
var data = decodeURIComponent(location.hash.replace(/{%.*%}/g, '').substr(1));
// substr(1) 删除 # 号
// 调用 a.html 的 callback() 函数,并传入值
pageA.callback('第' + count + '次:' + data);
}, false);
</script>
</body>
</html>