核心提示:试验场景:a.html 在域 www.a.com下b.html 在域 www.b.com 下a中通过iframe 引用 b.html期望结果:在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="https://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 = 'https://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中的元素是不可行的