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

发布时间：2019-06-21 21:01:41 所属栏目：建站来源：Aaron

导读：对付前端开拓来说跨域应该是最不生疏的题目了，无论是开拓进程中照旧在口试进程中都是一个常常碰着的一个题目，在开拓进程中碰着这个题目的话一样平常都是找后端同窗去办理，以至于许多人都忽略了对跨域的熟悉。为什么会导致跨域？碰着跨域又怎么去办理呢？本

子页面：

document.domain = 'a.com';  
$ajax.get({  
    //  ...省略  
})

着实现道理就是通过iframe载入一个与你想要通过ajax获取数据的方针页面处在沟通的域的页面，以是这个iframe中的页面是可以正常行使ajax去获取你要的数据的，然后就是通过我们方才讲得修改document.domain的要领，让我们能通过js完全节制这个iframe，这样我们就可以让iframe去发送ajax哀求，然后收到的数据我们也可以得到了。

location.hash

若领略了document.domain实现跨域道理，那么location.hash也就很号领略了，其道理与document.domain很相似一样都是动态插入一个iframe，然后把iframe的src指向处事端地点，而处事端同样都是输出一段JavaScript代码，同样都是操作和子窗口之间的通讯完成数据传输，同样要针对同源计策做出处理赏罚。

既然说到了hash到底什么是hash这里也就单独的说一下吧，固然很好领略，可是对付新同窗来说也许还不知道hash详细是什么？

hash:一样平常翻译做散列、杂凑，或音译为哈希，是把恣意长度的输入（又叫做预映射pre-image）通过散列算法调动成牢靠长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间凡是远小于输入的空间，差异的输入也许会散列成沟通的输出，以是不行能从散列值来确定独一的输入值。简朴的说就是一种将恣意长度的动静压缩到某一牢靠长度的动静择要的函数。 -- 节选自百度百科

读完之后感受本身整小我私人都欠好了，有些似懂非懂的意思，我所领略的哈希是指一个进程，这个进程就是把恣意长度的输入，通过哈希算法，调动成牢靠长度的输出，所输出的称为哈希值。这种调动是一种压缩映射，也即哈希值所占的空间一样平常来说远小于输入值的空间，差异的输入也许会哈希出沟通的输出（概率很小）。

哈希有如下特点：

假如两个哈希值是不沟通的（按照统一函数），那么这两个散列值的原始输入必然是不沟通的。
假如两个哈希值沟通，两个输入值很也许(极或许率)是沟通的，但也也许差异，这种环境称为“哈希碰撞”
抗改下手段：对付一个数据块，哪怕只窜改其一个比特位，其hash值的窜改也会很是大。
它是一种单向函数是“非对称”的，即它是一个从明文到密文的不行逆的映射,只有加密进程,没有解密进程。

那么哈希在平常项目开拓中有什么用途呢？可以用哈希来做什么工作？对付前端来说用到哈希最多的时辰也许就是锚点定位。通过差异的哈希值定位到描点指定的元素位置上。

<a href='#1'>red</a>  
<a href='#2'>black</a>  
<a href='#3'>yellow</a>  
<a href='#4'>pink</a>  
<div id='1' style='width:500px;height:200px;background-color:red'> </div>  
<div id='2' style='width:500px;height:200px;background-color:black'> </div>  
<div id='3' style='width:500px;height:200px;background-color:yellow'> </div>  
<div id='4' style='width:500px;height:1200px;background-color:pink'> </div>

关于更多细节的对象不再这里赘述了，假如想要相识更多的话各人可以自行google，再说下去的话也许就跑题了。

简朴的先容了一下哈希与哈希的用处那么又该怎样行使哈希来实现跨域呢？着实很简朴，假如index页面要获取远端处事器的数据，动态插入一个iframe，将iframe的src属性指向处事端地点。这时top window和包裹这个iframe的子窗口因为同源计策的缘故起因是不能直接通讯的，以是改变子窗口的路径就行了，将数据当做改变后的路径的hash值加在路径上，然后就能通讯了，将数据加在index页面地点的hash值上。index页面监听地点的hash值变革然后做出判定，处理赏罚数据。

父页面：

<iframe src="http://localhost:7000/b.html#key=1&key1=2"></iframe>

因为哈希值的改变不会改变网页的网址的，以是处事端可以通过获取到哈希来理会url中的参数，并把数据返回给前端即可。通过parent.location.hash去改变哈希值，然后就可以像document.domain一样去获取到子页面的数据了。parent.location.hash该要领是有范围性的，在IE和Chrome中是不支持这种操纵的。那么整个题目应怎样办理呢？

在同域的域名下面添加一个*.html(*代表恣意名)文件，然后把通过iframe把*.html引入到父页面中，并把必要哀求的接口iframe添加到*.html中去哀求，这样就可以办理了。

http://localhost:6000/a.html

<!DOCTYPE html>  
<html>  
<head>  
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
<title>无</title>  
</head>  
<body>  
<script type="text/javascript">  
function sendRequest(){  
    var ifr = document.createElement('iframe');  
    ifr.style.display = 'none';  
    ifr.src = 'http://localhost:7000/b.html#Aaron';  
    document.body.appendChild(ifr);  
}  
function checkHash(){  
    var data = location.hash?location.hash.substring(1):'';  
    if(data) location.hash = '';  
}  
setInterval(checkHash,1000);  
window.onload = sendRequest;  
</script>  
</body>  
</html>

（编辑：湖南网）

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

5/15

首页

尾页

SEO排名难做的四大原因	在保持网站优化的同时
网站SEO优化的几个技巧	网站原创内容怎么写？