您现在的位置:首页 >> 前端 >> 内容

iframe跨域,页面如何获取父页面元素?

时间:2017/12/12 10:28:11 点击:

  核心提示:试验场景: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中的元素是不可行的

Tags:IF FR RA AM 
作者:网络 来源:Lance5678的