专题复习八、闭包及js跨域

  • 何为闭包
    闭包解决的是函数外部访问函数内部变量的问题,举例说明:
    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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 822评论 0 0
  • 跨域资源共享 CORS 对于web开发来讲,由于浏览器的同源策略,我们需要经常使用一些hack的方法去跨域获取资源...
    默默先生Alec阅读 582评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 508评论 0 0
  • Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...
    qhaobaba阅读 376评论 0 0
  • 想来想去,还是希望把这个星期的1000字补上。 壹 我是个高中生,一个普通的高中生。 和其他高中生一样,有着繁重的...
    和森先生阅读 376评论 3 2