- 何为闭包
闭包解决的是函数外部访问函数内部变量的问题,举例说明:
function xxx (){
var user = {
name:'frank',
age:20}
}
假设现在想访问函数内部user的相关数据,怎么办?有两种实现方法:
①绑定全局变量上
function xxx (){
var user = {
name:'frank',
age:20
}
window.usergetter ={
namegetter:function(){
return user.name
},
agegetter:function(){
return user.age
},
old:function(){
user.age+=1
}
}
}
(window.usergetter是可以访问到function xxx的变量的,绑定到全局变量中,这样其他函数也可以访问了。如下面的yyy函数。在这里window.usergetter就叫做闭包,它是沟通外部与内部的桥梁)
function yyy(){
window.usergetter.namegetter()
window.usergetter.agegetter()
}
②不使用全局变量
function xxx (){
var user={
name:'frank'
age:20
}
return function (){
user.age +=1
}(精华之笔,意味着xxx的返回值是一个函数且这个函数里有xxx里面的变量)
}
如何拿到变量
var fn = xxx() fn.call() - 跨域
跨域就是指一个域名的网页去请求另一个域名的资源。只要协议、域名、端口有任何一个不同就当做是跨域。浏览器一般不对script、img等进行跨域限制,所以我们有机会通过script实现跨域访问
跨域一般有一下方法:
1、jsonp
假设现在服务器代码如下:
case 'main.js':
var number = query.data(拿到查询参数)
response.end('alert('+number+')')
我们访问路径:main.js?data=1
控制台打出:alert(1)zh
现在假设我们不改后面改前面,代码如下:
case 'main.js':
var functionName = query.callback(拿到查询参数)
response.end('functionName'+'(1)')
我们访问路径:main.js?callback=xxx
控制台打出:xxx(1),这就是jsonp,就是你callback后面值是什么,我函数名就是什么
那怎么利用jsonp实现跨域访问呢。假设现在'(1)'变成重要的信息,例如:‘我的密码是yyy’
现在我一个域名想要获取你的main.js文件
服务器代码:
swich(path){
case 'index.html'
response.end('<script src="http://localhost:8888/main.js?callback=ccc"></script>)
break;
}
打开这个域名下的index.html,发现它请求了http://localhost:8888/main.js?callback=ccc路径下的文件,且在控制台打出ccc(‘我的密码是yyy’).这样的话,我们就拿到了另一个js的数据,我们只需要重新定义ccc函数就可以实现将相关信息输入到页面中。如:function ccc(x){document.write(x)}.
ccc可以自己定义,这样就是二者的桥梁。jsonp就是动态js(callback约定),把数据放到callback里面
2、document.domain
使用条件:①有其他页面window对象引用 ②二级域名相同 ③协议相同 ④端口相同
例如:http://wenku.baidu.con http://zhidao.baidu.com(二级域名都是baidu.com)
原理:把二者的document.domain都设置为同一个值,表明他们需要协作,例如本例中可以都设置为baidu.com,这样用一个页面的window对象操作另一个页面了
上述方法不常用,最常用的是把其中一个页面通过iframe嵌套在另一个页面中,设置二者的document.domain相同,这样这个页面就对iframe有掌控权了
3、window.name
原理:打开一个页面设置其window.name,页面跳转后,新页面的window.name不会发生改变,利用这个原理,在window.name存一些想要的数据,通过iframe交互。例:
var iframe =document.getElementById('iframe');
var data='';
iframe.onload = function(){
data = iframe.contentwindow.name;(获取name里的内容)
iframe.src='about:blank';(跳转空页面,保证同源)
}
4、[HTML5]postMessage
参考链接:postMessage
5、CORS
浏览器一旦发现ajax请求是跨源,就会自动添加一些附加的头信息,用来与服务器判别交互。实现CORS,关键是服务器,只要服务器实现CORS接口,就可以跨源通信
跨源通信一般分为简单请求和费简单请求,区别在于请求方法(head、get、post)及头信息的限制,非简单请求会比简单请求多一个预检请求流程
Origin(浏览器,源) Access-Content-Allow-Origin(服务器:响应)
与jsonp比较更强大,因为jsonp只支持get请求,而CORS支持所有类型的请求,但是CORS会存在安全问题
参考链接:CORS
专题复习八、闭包及js跨域
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...