首页 > 代码库 > js iframe跨域访问
js iframe跨域访问
1.同主域下不同子域之间的跨域请求 使用document.domain
比如:morningstar.com 和test.morningstar.com
只要把两个页面 的document.domain都指向主域就可以了,比如document.domain=‘morningstar.com‘
<!-- morningstar.com/parent.html --> <iframe id="ifr" src="http://test.morningstar.com/MarketBarometer/html/test.html" width="200px"></iframe> <script>document.domain = ‘morningstar.com‘; functionaa(str){ console.log(str); } window.onload = function(){ document.getElementById(‘ifr‘).contentWindow.bb(‘aaa‘); } </script> <!--test.morningstar.com/test.html --><script>document.domain = ‘morningstar.com‘; functionbb(str){ console.log(str); } parent.aa(‘bbb‘); </script>
2.不同域之间的跨域请求 使用postMessage。postMessage是HTML5新增的方法,简单易用高大上
比如:test.com 和qsstage.morningstar.com
.postMessage(message,targetOrigin)参数说明
message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围,不限制请使用 ‘*‘
‘message‘,function(e)回调函数第一个参数接受Event对象,有三个常用属性:
data: 消息
origin: 消息来源地址
source: 源 DOMWindow 对象
一个简单的父页面qsstage.morningstar.com/parent.html 和子页面 test.com/test.html建立通信
<!-- qsstage.morningstar.com.com/parent.html --><iframeid="ifr"src="http://bar.com/b.html"></iframe><script>window.onload = function(){
var ifr = document.querySelector(‘#ifr‘);
ifr.contentWindow.postMessage({a: 1}, ‘*‘);
}
window.addEventListener(‘message‘, function(e){
console.log(‘bar say: ‘+e.data);
}, false);
</script>
<!-- test.com/test.html -->
window.addEventListener(‘message‘, function(e){
console.log(‘foo say: ‘ + e.data.a);
e.source.postMessage(‘get‘, ‘*‘);
}, false)
3.利用代理页面来解决HTML iframe跨域访问 使用location.hash.
通过URL传递数据。
结构关系:src
---parent.html
---poxy.html
child.html
一个简单的父页面chart.com/parent.html 和子页面 test.com/child.html建立通信,通过chart.com/poxy.html实现跨域访问
<!-- chart.com/parent.html --> <iframe id="test1" src="http://test.com/MarketBarometer/html/test.html" width="100%" height="200px"></iframe> <script> function callback(data) { console.log(data); } </script>
<!-- chart.com/poxy.html --> <script type="text/javascript"> window.onload = function () { var data = http://www.mamicode.com/location.hash.substr(1); data = eval("(" + decodeURIComponent(data) + ")"); top.document.getElementById("test1").style.height = data.height + ‘px‘; //调用父页面方法,可不写 top.callback(data); } </script>
<!-- test.com/child.html --> <div style="height:400px"> <p>我是子页面</p> </div> <script type="text/javascript"> window.onload = function () { if (!document.getElementById("crossFrame")) { var iframe = document.createElement(‘iframe‘); iframe.setAttribute(‘style‘, ‘width:100%‘); iframe.setAttribute(‘src‘, ‘http://chart.com/src/html/poxy.html‘); var height = document.documentElement.scrollHeight; var data = http://www.mamicode.com/‘{height:‘ + height + ‘}‘; //通过参数传递高度heights iframe.src = http://www.mamicode.com/‘http://chart.com/src/html/poxy.html#‘ + data; document.body.appendChild(iframe); } else { document.getElementById("crossFrame").src =http://www.mamicode.com/ url; } } </script>
js iframe跨域访问
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。