1.什么是跨域?
2.前台解决跨域几种方法
  2.1 动态创建script
  2.2 使用document.domain
  2.3使用HTML5新属性postMessage
  2.4 利用iframe和location.hash
 
 
什么是跨域?
....................................................................................................................................................................................
Javascript处于安全方面的考虑(同源策略限制),不允许跨域调用其他页面的对象。
也就是“Domains,protocols,posts”不一样就是跨域。
“Domains”就是指的域名,
“protocols”就是协议,分为http和https,
“ports”就是端口名称
需要注意的是:
  1.如果是protocols和ports不一致造成的跨域,前台没有办法解决
  2.域只通过URL的首部,也就是protocols+domain+port来判断是否跨域,不会去判断domain是否对应着相同的IP地址
    因此就出现如下几种跨域情况:
 
 
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标签
  虽然浏览器默认阻止跨域请求,但是不阻止在页面中引用其他域的文件。
  因此可以动态添加script标签。JSONP就是利用这一原理来实现ajax跨域的
 
2.通过修改docment.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>

3.通过HTML5 postMessage

  不同域之间的跨域请求  使用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)
  

4.iframe+location.hash解决跨域
  利用代理页面来解决HTML iframe跨域访问  使用location.hash.
  通过URL传递数据。
  结构关系:chart/com
                      ---parent.html
                      ---poxy.html
      test.com
                  ---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/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跨域访问的更多相关文章

  1. iframe跨域访问

    js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...

  2. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  3. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  4. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  5. 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法

    单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...

  6. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  7. javascript跨域、iframe跨域访问

    1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...

  8. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 【HTML】iframe跨域访问问题

    概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...

随机推荐

  1. Elasticsearch常用插件(三)

    elasticsearch-head 一个elasticsearch的集群管理工具,它是完全由html5编写的独立网页程序,你可以通过插件把它集成到es. 项目地址:https://github.co ...

  2. 1、API

    基本API sectionsColor:['green','orange','red','grey'],//为每一层设置背景颜色 controlArrows:true,//是否显示幻灯片的左右按钮 v ...

  3. jetbrain phpstorm 增加或删除一个 live template

    打开\.PhpStorm2016.2\config\templates 将xml文件放入该文件夹中 重启! 单独: setting -> editor -> Live Template +

  4. 清理SharePoint 2010的SQL Server 2008 R2日志数据库的方法!

    //来源:http://www.cnblogs.com/nbpowerboy/p/3380079.html 公司用SharePoint 2010已有三年多的时间了,上BPM项目也有2年多的时间,之前供 ...

  5. windows上安装ubuntukylin16.04并且在ubuntukylin上安装jdk

    1.安装ubuntukylin16.04 教程链接:http://jingyan.baidu.com/article/f71d60379824041ab641d19d.html 我是完全按照这个教程来 ...

  6. H264帧内预测模式编号的编码过程

    1 本文词汇约定 宏块:H264编码基本单元,16x16像素(或采样)构成 块:   由8x8像素(或采样)构成的单位 子块:   由4x4像素(或采样)构成的单位 2 帧内亮度预测模式 H264规范 ...

  7. 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 ...

  8. html音视频标签

    音视频标签是html5标签,分别为<audio></audio>和<video></video>,这两个标签用法大致相同,且都仅在IE9及以上版本和其他 ...

  9. 记一次-angular-数字格式化

    一个收费功能模块,需要做数据验证. input标签的ng-model的数据格式化 <input type="number" class="form-control& ...

  10. Windows上安装MongoDB步骤

    事前准备: 1.在mongoDB官网下载.msi文件,我下的是社区版,下载地址:https://www.mongodb.com/download-center#community 2.点击msi文件安 ...