js iframe跨域访问
URL | 说明 | 是否跨域 |
http://www.a.com/a.js http://www.a.com/b.js |
同protocol,domain,port | 允许 |
http://www.a.com/a/a.js http://www.a.com/b/b.js |
同protocol,domain,port,不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同protocol,domain,不同port(默认port:80) | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同domain,port,不同protocol | 不允许 |
http://www.a.com/a.js http://192.168.82.45/b.js |
同protocol,port,不同domain | 不允许 |
http://www.a.com/a.js http://child.a.com/b.js |
主域相同(a.com),子域不同(www,child) | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
一级域名相同,二级域名不同(同上) | 不允许 |
http://www.a.com/a.js http://www.b.com/b.js |
同protocol,port,不同domian | 不允许 |
解决方法
1.动态创建script标签
<!-- 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>
3.通过HTML5 postMessage
.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)


一个简单的父页面chart.com/parent.html 和子页面 test.com/child.html建立通信,通过chart.com/poxy.html实现跨域访问
<!-- chart.com/parent.html -->
<iframe id="test1" src="http://test.com/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 = 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/poxy.html');
var height = document.documentElement.scrollHeight;
var data = '{height:' + height + '}';
//通过参数传递高度heights
iframe.src = 'http://chart.com/poxy.html#' + data;
document.body.appendChild(iframe);
} else {
document.getElementById("crossFrame").src = url;
}
}
</script>
js iframe跨域访问的更多相关文章
- iframe跨域访问
js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法
单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...
- JS Ajax跨域访问
js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...
- javascript跨域、iframe跨域访问
1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...
- 【js跨域】js实现跨域访问的几种方式
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【HTML】iframe跨域访问问题
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
随机推荐
- Elasticsearch常用插件(三)
elasticsearch-head 一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序,你可以通过插件把它集成到es. 项目地址:https://github.co ...
- 1、API
基本API sectionsColor:['green','orange','red','grey'],//为每一层设置背景颜色 controlArrows:true,//是否显示幻灯片的左右按钮 v ...
- jetbrain phpstorm 增加或删除一个 live template
打开\.PhpStorm2016.2\config\templates 将xml文件放入该文件夹中 重启! 单独: setting -> editor -> Live Template +
- 清理SharePoint 2010的SQL Server 2008 R2日志数据库的方法!
//来源:http://www.cnblogs.com/nbpowerboy/p/3380079.html 公司用SharePoint 2010已有三年多的时间了,上BPM项目也有2年多的时间,之前供 ...
- windows上安装ubuntukylin16.04并且在ubuntukylin上安装jdk
1.安装ubuntukylin16.04 教程链接:http://jingyan.baidu.com/article/f71d60379824041ab641d19d.html 我是完全按照这个教程来 ...
- H264帧内预测模式编号的编码过程
1 本文词汇约定 宏块:H264编码基本单元,16x16像素(或采样)构成 块: 由8x8像素(或采样)构成的单位 子块: 由4x4像素(或采样)构成的单位 2 帧内亮度预测模式 H264规范 ...
- Enhancing Reliability and Response Times via Replication in Computing Clusters---INFOCOM 2015
[标题] Enhancing Reliability and Response Times via Replication in Computing Clusters [作者] Zhan Qiu an ...
- html音视频标签
音视频标签是html5标签,分别为<audio></audio>和<video></video>,这两个标签用法大致相同,且都仅在IE9及以上版本和其他 ...
- 记一次-angular-数字格式化
一个收费功能模块,需要做数据验证. input标签的ng-model的数据格式化 <input type="number" class="form-control& ...
- Windows上安装MongoDB步骤
事前准备: 1.在mongoDB官网下载.msi文件,我下的是社区版,下载地址:https://www.mongodb.com/download-center#community 2.点击msi文件安 ...