js中各种跨域问题实战小结(二)

时间:2022-09-01 14:48:51

这里接上篇:js中各种跨域问题实战小结(一)

后面继续学习的过程中,对上面第一篇有稍作休整。下面继续第二部分:

-->5.利用iframe和location.hash

-->6.window.name跨域实现

利用iframe和location.hash实现跨域

想必有很多人像我之前一样,或许只知道上面文中所说的那几种方法。所以,我刚了解到可以用iframe和location.hash来实现跨域的时候,我会想,为什么他们可以实现。iframe是什么,有什么特性,location.hash是什么又有什么特性。

准备:

>>1.MDN上说的<iframe>:HTML 的<iframe>(HTML inline框架元素)是一个嵌套的浏览上下文,他可以有效地嵌入另一个HTML页面到当前页面。在HTML 4.01中,一个文件可能包含一个头和一个身体或头部和一个框架集,而不是一个身体和一个框架集。然而,一个< iframe >可以被应用在正常的文件体。每个浏览上下文有它自己的会话历史和活动文档。浏览上下文包含嵌入的内容叫做父浏览上下文。*的浏览上下文(没有父)是典型的浏览器窗口。

了解到了<iframe>,我觉得另外两个相似的标签<frame>和<frameset>可以一起拿过来看下啦,这有篇文章放在一起总结了下:Frameset,Frame和Iframe

>>2.window.location:打开chrome的console,一起来试一下,很快就懂啦。我们从最基本的开始:

2.1 可以跳转到另一个页面:打开百度搜索的主页,然后在console中输入下面代码:

window.location = "http://www.cnblogs.com/skylar/";

看,是不是跳转到我的博客主页啦。

2.2 强制从服务器重新加载页面:既然来到了我的博客主页,就先别走,继续输入下面代码:

window.location.reload(true);

可以看到页面被重新加载了。

2.3 然后可以点击进去比如js中各种跨域问题实战小结(一)这篇文章,console输入:

location.hash = '#comments';

看看页面是不是跳到了最下面评论的位置。

其实还有两个特性:比如说alert当前url属性,通过修改window.location.search属性向服务器发送一个字符串,这你可以移步这里自行脑补:MDN window.location 。

这里有用的是下面这个例子:location.hash理解demo

这里可以查看代码:https://github.com/zhangmengxue,因为我们就是要利用location.hash的特性来加上iframe来实现跨域,看完了这个demo,我们就可以开始实现跨域了。(请用chrome打开,还有些需要总结的兼容性问题)

实现:

我为了模拟两个不同的域,在SAE上面创建了两个wordpress应用,如果你之前也不懂SAE是什么的话,这个小简介:新浪SAE 会让你大致了解到SAE是做什么的,如何开始使用它。我的两个应用:

js中各种跨域问题实战小结(二)

看到url了吧,是不同域喔,环境模拟好了,我可以开始尝试跨域了。

在[http://1.daeskylar.sinaapp.com/]下有两个文件 a.html和c.html;

在[http://1.skylarisdae.sinaapp.com/]下有文件 b.html

我想要在a.html中访问我在b.html中模拟的数据Helloworld!

好呀,那现在点击 有a.html和c.html的这个域 访问我在这个域上的a.html文件,它应该会告诉你他是a.html页面,然后他会访问到了我放在b.html中的HelloWorld!

跨域这样就实现了喔,那具体是怎样实现的呢?

原理:

a.html想和b.html通信(在a.html中动态创建一个b.html的iframe来发送请求);

但是由于“同源策略”的限制他们无法进行交流(b.html无法返回数据),于是就找个中间人:与a.html同域的c.html;

b.html将数据传给c.html(b.html中创建c.html的iframe),由于c.html和a.html同源,于是可通过c.html将返回的数据传回给a.html,从而达到跨域的效果。

三个页面之间传递参数用的是location.hash,改变hash并不会导致页面刷新(这点很重要)。

------------------------------------------------------------------------------------------------------------------------------------------------

a.html---①--->b.html----②--->c.html---③--->a.html——>a.html便获得到了b.html中的数据

①通过iframe的location.hash传参数给b.html  ;

②通过iframe的location.hash传参数给c.html ;

③同域传给a.html。

-------------------------------------------------------------------------------------------------------------------------------------------------

代码:

a.html:

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>localhost:a.html</title> <style type="text/css"> </style>
</head> <body>
<script type="text/javascript">
alert('我是a页面');
function sendRequest(){
//动态创建个iframe
var ifr = document.createElement('iframe');
ifr.style.display = 'none';
//跨域发送请求给b.html,参数是#sayHello
ifr.src = 'http://1.skylarisdae.sinaapp.com/b.html#sayHello';
document.body.appendChild(ifr);
}
function checkHash(){
var data = location.hash?location.hash.substring(1):'';
if(data){
//这里处理返回值
alert(data);
location.hash = '';
}
}
setInterval(checkHash,1000);
window.onload = sendRequest;
</script>
</body>
</html>

c.html:

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>localhost:c.html</title> <style type="text/css"> </style>
</head> <body>
<script type="text/javascript">
//因为c.html和a.html属于同一个域,所以可以通过改变其location.hash的值,可以通过parent.parent获取a.html的window对象
parent.parent.location.hash = self.location.hash.substring(1);
</script>
</body>
</html>

b.html:

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>另某个域的:b.html</title> <style type="text/css"> </style>
</head> <body>
<script type="text/javascript">
function checkHash(){
var data = '';
//模拟一个简单的参数处理操作
switch(location.hash){
case '#sayHello':
data = 'HelloWorld';
break;
case '#sayHi':
data = 'HiWorld';
break;
default : break;
}
data && callBack('#'+data);
}
function callBack(hash){
var proxy = document.createElement('iframe');
proxy.style.display = 'none';
proxy.src = 'http://1.daeskylar.sinaapp.com/c.html'+hash;
document.body.appendChild(proxy);
}
window.onload = checkHash;
</script>
</body>
</html>

这里参考了:javascript跨域详解

利用window.name实现跨域

实现:

我还是利用上面我在sae上面创建的应用:

在[http://1.daeskylar.sinaapp.com/]下有两个文件 wantdata.html和proxy.html;

在[http://1.skylarisdae.sinaapp.com/]下有文件 data.html。

我想要在wantdata.html中访问到我在data.html中存在window.name中的数据,是个字符串,就叫‘我拿到数据啦!’。

访问这里:http://1.daeskylar.sinaapp.com/wantdata.html 应该可以看到alert出的数据喔。

原理:

MDN上的window.name是这样说的:

窗口的名称,主要用于设置超链接和表格对象。Windows不需要有名字。

它也被用于提供跨域通信的一些框架(例如,sessionvars和Dojo的DojoX。IO。windowname)为JSONP更安全的替代方案。

window.name 的美妙之处在于:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

这篇文章讲解的非常详细,很值得阅读:使用window.name解决跨域问题

实现起来基本步骤如下:

1.创建一个iframe,把其src指向目标页面(提供web service的页面,该目标页面会把数据附加到这个iframe的window.name上,大小一般为2M,IE和firefox下可以大至32M左右;数据格式可以自定义,如json字符串);

2.监听iframe的onload事件,在此事件中立即设置这个iframe的src指向本地域的某个页面,由本地域的这个页面读取iframe的window.name。

3.获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

代码:

wantdata.html

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>window.name跨域demo</title> <style type="text/css"> </style>
</head> <body>
<script type="text/javascript">
var state = 0,
iframe = document.createElement('iframe'),
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name; // 读取数据
alert(data); //弹出'拿到数据啦!'
//下面立即销毁iframe,释放内存,也保证安全
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
} else if (state === 0) {
state = 1;
iframe.contentWindow.location = "http://1.daeskylar.sinaapp.com/proxy.html"; // 设置的代理文件
}
};
iframe.src = 'http://1.skylarisdae.sinaapp.com/data.html';
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script>
</body>
</html>

data.html

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>data页</title> <style type="text/css"> </style>
</head> <body>
<script type="text/javascript">
window.name = '拿到跨域的数据啦!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
// 数据格式可以自定义,如json、字符串
</script>
</body>
</html>

proxy.html

 <!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>window.name跨域demo</title> <style type="text/css"> </style>
</head> <body>
<span>这里是代理空文件</span>
<script type="text/javascript"> </script>
</body>
</html>

这里参考了:window.name实现跨域数据传输   使用window.name解决跨域问题

从一大早写到现在了,午觉也没睡,写不动了,后面再来个三吧,补上:

-->7.HTML5 postMessage实现跨域

js中各种跨域问题实战小结(二)的更多相关文章

  1. js中各种跨域问题实战小结(一)

    什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...

  2. js中各种跨域问题实战小结

    什么是跨域?为什么要实现跨域呢?   这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源 ...

  3. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  4. 001&lowbar;Three&period;js中的跨域问题

    001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...

  5. JS中的跨域问题

    一.什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.但是一般情况下不能这么做,它是由浏览器的 ...

  6. js中的跨域方法总结

    什么是跨域? 浏览器的安全策略,只要协议,域名,端口有任何一个不同,就被当做不同的域. 下面对http://www.qichedaquan.com的同源检测 http://www.qichedaqua ...

  7. JS 中的跨域请求

    跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...

  8. js中的跨域

    因为javascript的同源策略,导致它普通情况下不能跨域,直到现在,我还是不能完全理解js跨域的几种方法,没办法,只能慢慢学习,慢慢积累,这不,几天又在园里看到一篇博文,有所收获,贴上来看看; 原 ...

  9. 【原创】Vue&period;js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

随机推荐

  1. Jmeter学习笔记ONE

    最近想学一些关于性能测试方面的知识,其实之前已经初步了解了Jmeter工具,它是一个轻量级的性能测试工具,开源并且免费,相比于Loadrunner来说用起来更简便. JMeter 可以用于对服务器.网 ...

  2. MPI Maelstrom - POJ1502最短路

    Time Limit: 1000MS Memory Limit: 10000K Description BIT has recently taken delivery of their new sup ...

  3. 直接在Chrome里抓取数据

    一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...

  4. oracle日志总结

    ①. Oracle日志分类: Alert log files--警报日志 , redo log 重做日志(记录数据库的更改,Trace files--跟踪日志(用户和进程) Oracle的重做日志(r ...

  5. html5画四边形

    <canvas id='test02'></canvas> <script> var canvas = document.getElementById('test0 ...

  6. QString与中文,QString与std&colon;&colon;wstring的相互转换(使用fromStdWString和u8关键字)

    Qt版本:5.5.1 Qt的QString功能丰富,对非英语语言的支持也不是问题,但支持得不够直接.例如,像 ? 1 QString str("死亡使者赛维"); 这样直接用带中文 ...

  7. 提供一个好用的Oracle Database 11g 下载地址

    提供一个好用的Oracle Database 11g 下载地址,在windows xp 操作系统下,测试通过. http://download.oracle.com/otn/nt/oracle11g/ ...

  8. JavaWeb入门笔记

    Java web笔记 一.HTTP协议 HTTP(超文本传输协议),它是一种主流B/S架构中应用的通信协议.具有以下特点: 1.无状态 服务端不会记录客户端每次提交的请求,服务器一旦相应客户端之后,就 ...

  9. ZooKeeper基础

    ======================================ZooKeeper 背景======================================ZooKeeper 是一 ...

  10. (拼接SQL语句)mysql中date类型,datetime类型

    : , . _ - /  %  &  # @ ! * | [ ] { }   ;  + = update ky set date = '18,9-2'  where id  = 1  // 2 ...