通过iframe中间页实现js跨域调用

什么是跨域调用？

当两个页面端口不同或者协议不同，或者ip地址不同的时候，如果想在这个页面调用另外一个页面中的方法，就叫做跨域调用

父页面调用子页面

通过iframe实现跨域请求
www.a.com
www.b.com

想在a中调用b中的方法，因为a和b是不同域的，不能直接调用，但是如果有一个中间页，这个页面和b是同源的，在页面初始化的时候就帮忙调用b中的方法
然后我们再在a中初始化这个页面，这不就实现了跨域请求吗

那么结构将变成

www.a.html
www.b.com
www.b.com/f.html

f页面中直接在页面加载完成就调用b中的方法

然后我们只需要在a中想要调用b中方法的时候，动态生成一个iframe，嵌入ww.b.com/f.html，当生成完成的时候，它就能自动调用b中的方法

子页面调用父页面

同样的，如果是子请求父页面

那么只需要将结构变成

www.a.html
www.b.html
www.a.html/f.html

f初始化的时候，自动调用a中的方法
我们在b中想要调用a中方法时候，只需要动态生成一个iframe，www.a.html/f.html，这不就实现了在b中调用a中的方法吗？

当需要调用的方法不止一个的时候应该如何处理？

在a中调用b中的方法，如果方法不止一个，那可能给他加很多个页面来处理吧？这时候，可以通过传递参数的形式，然后让js解析传递过来的参数，是什么参数，就在初始化的时候调用什么方法，你可以通过window.location.href获取到当前的url地址，然后再用解析字符串的方式来解析这个地址，例如你完全可以截取到?后端的部分，判断当前传递过来的是什么参数

//父调用子方法实例
<iframe id="frame" width="0px" height="0px"></iframe>
<script>//需要传递两个参数一个method=这里写方法名&url=这里写具体调用哪个页面的方法var url = window.location.href;var firstIndex = url.indexOf("?");var frame = document.getElementById("frame");   if(firstIndex != -1){var paramArray = url.substring(firstIndex+1,url.length).split("&");var _src = paramArray[1].split("=")[1];frame.src = _src;           var method = paramArray[0].split("=")[1];if(method){frame.contentWindow[method]();  //传什么方法就直接调用什么方法}}</script>
//在a中iframe这个页面，然后写上http:www.b.html/f.html?method=test&url=http://www.b.html

通过iframe中间页实现js跨域调用相关推荐

解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...
js php调用webservice,js跨域调用WebService的使用方法
这次给大家带来js跨域调用WebService的使用方法,js跨域调用WebService的注意事项有哪些,下面就是实战案例,一起来看一下. 步骤1. 在web.config中的system.web节 ...
js跨域调用php接口,php的json格式和js跨域调用的代码
function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage ...
php 跨域 json,PHP json格式和js json格式 js跨域调用实现代码
先看一个js函数 function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy' ...
vue 调用webservice_js跨域调用WebService的简单实例
步骤1. 在web.config中的system.web节点里加入步骤2.webservice代码 using System; using System.Collections.Generic; u ...
【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...

通过iframe中间页实现js跨域调用

什么是跨域调用？

父页面调用子页面

子页面调用父页面

当需要调用的方法不止一个的时候应该如何处理？

通过iframe中间页实现js跨域调用相关推荐

最新文章

热门文章