本文介绍了在iframe跨域情况下，如何通过创建隐藏iframe和利用JavaScript实现子页面(b.html)修改父页面(a.html)元素的方法。适用于电商系统与第三方支付系统的混合应用交互场景。
试验场景：
a.html 在域 www.a.com下
b.html 在域 www.b.com 下
a中通过iframe 引用 b.html
期望结果：
在b.html相关处理完成后 修改 a.html中的元素 <input id="crossDomainInput" type="text" />
应用场景：
公司内部有两个系统，一个电商系统，一个第三方支付系统， PC端需要在支付时跳转至第三方系统登录、支付，支付完成返回电商系统
解决案例：
1：在域www.a.com 下新建一个页面取名为c.html
c.html案例
<html>
<head>
<title>c.html</title>
</head>
<script type="text/javascript">
parent.parent.document.getElementById("crossDomainInput").value="我是在域www.b.com中被运行的";
</script>
<body>
</body>
</html>
2.在a.html中添加引入b.html的iframe代码
a.html案例
<html>
<head>
<title>父页面</title>
</head>
<body>
<input id="crossDomainInput" type="text" />
<iframe src="http://www.b.com/b.html"></iframe>
</body>
</html>
3.在b.html中 创建一个隐藏iframe，其src地址为 域www.a.com下的c.html文件
b.html案例
<html>
<head>
<title> 子页面</title>
<script type="text/javascript">
exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = 'http://www.a.com/c.html';
exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);
</script>
</head>
<body>
.........
</body>
</html>
访问a.html 您会惊奇发现， a.html中的input的value值变化了
解答：
首先同源策略是不可破的， 所以直接在b.html中去获取a.html中的元素是不可行的
扫一扫
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
