前端开拓 | 那些年曾谈起的跨域

通过对百度的即时搜刮的说明就可以简朴的看出JSONP的实现道理，哀求会的js文件中包括一个函数，其函数名称就是毗连中cb的参数最为参数传给靠山，靠山通过处理赏罚并在执行这个与参数对应的函数的，当函数执行的时辰将把数据以实参的情势转达给对应的函数，办理跨域题目。为了利便阅读这里只截取了代码片断。

案例：

前端代码：

$('#btn').click(function(){  
    var frame = document.createElement('script');  
    frame.src = 'http://localhost:5000/jsonp?name=aaron&age=18&callback=query';  
    $('body').append(frame);  
});  
function query(res){  
    console.log(res.message+res.name+'你已经'+res.age+'岁了');  
}  

后端代码：

router.get('/jsonp', (req, res) => {  
    let {name,age,callback} = req.query;  
    let data = {message:'success',name,age};  
    data = JSON.stringify(data);  
    res.end(`${callback}(${data})`);  
});  

通过如上代码就可以简朴的实现JSONP，固然JSONP办理了跨域的题目，照旧有许多破绽的，好比会在页面中添加一些script标签，数据不能双向操纵等等。

行使JSONP的时辰尤其要留意一点，必然要把插入的script放到所应用函数的下面。这个和js的执行次序有相关，假如把script标签放在上面的话，其要领还没有被读取在script标签中就执行了这个要领一定报错的，这点很重要哦。

document.domain

document.domain项目中一样平常应用的较少，默认环境下document.domain存放的是载入文档的处事器的主机名。可以在节制台输出一下，获得的则是segmentfault.com这个域名。我在项目中所用到的则是团结iframe的时辰碰着的跨域，并行使的domain办理的。

在行使document.domain实现跨域的时辰必要留意一下，这两个域名必需属于统一个一级域名!并且所用的协议，端口都要同等，不然无法操作document.domain举办跨域。Javascript出于对安详性的思量，而榨取两个可能多个差异域的页面举办相互操纵。而沟通域的页面在彼此操纵的时辰不会有任何题目。

简朴的表明一下，譬喻想要在www.a.com中将看到segmentfault.com中的内容并将其网页行使iframe将其嵌入到其网页中，可是此时赏识器是不应承通过JavaScript直接操纵segmentfault.com的，由于这两个页面属于差异的域，在操纵之前赏识器会检测是否切条约源计策，假如切合则应承操纵，反之则不可。

若想要同过document.domain实现跨域的话，必需使其满意同源计策，这个时辰就必要用到document.domain，document.domain都设成沟通的域名就可以了。但要留意的是，document.domain的配置是有限定的，我们只能把document.domain配置成自身或更高一级的父域，且主域必需沟通。

譬喻：

a.com  
news.a.com  

news.a.com属于a.com的一个子域名，凭证上面所说已经满意了上面的法则，假如想要实现跨域操纵就必要对接子页面的document.domain举办操纵。

父页面：

document.domain = 'a.com';  
var ifr = document.createElement('iframe');  
ifr.src = 'news.a.com/map.html';  
ifr.style.display = 'none';  
document.body.appendChild(ifr);  
ifr.onload = function(){  
    var doc = ifr.contentDocument || ifr.contentWindow.document;  
    var oUl = doc.getElementById('ul1');  
    alert(oUl.innerHTML);  
    ifr.onload = null;  
};  

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!