【跨域请求（三）】FIM —— Fragment Identitier Messaging（location.hash + iframe）（中间代理页）《双向跨域》

最新推荐文章于 2020-11-25 15:19:35 发布

iuukai

最新推荐文章于 2020-11-25 15:19:35 发布

阅读量183

点赞数

分类专栏：跨域篇

本文链接：https://blog.csdn.net/weixin_45389633/article/details/109992798

版权

跨域篇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

iuukai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【跨域请求（三）】FIM —— Fragment Identitier Messaging（location.hash + iframe）（中间代理页）《双向跨域》

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"&g.
复制链接

扫一扫

专栏目录