基于iframe实现ajax跨域请求获取网页中的ajax数据

众所周知，ajax请求不能在不同的域中发送，浏览器会报告以下错误：

同时，嵌入的iframe不能跨域通信，这意味着不同域中的iframe不能相互读取数据(当然，使用哈希更改可以将数据从父窗口传输到子iframe，但这没有任何意义)。当iframe跨域通信时，浏览器将报告以下错误：

其实这两个问题都是跨域造成的。

下面是如何解决这个问题。

事实上，问题的关键在于浏览器在解析ajax请求时会将它的地址与当前网页的地址进行比较。如果是跨域，则禁止并报告错误。因此，如果我们让浏览器解析的ajax地址与当前网页的解析地址相同，浏览器不会禁止我们的请求。

那么浏览器是如何解析url的呢？

首先，浏览器在访问一个域名时，会查询本地DNS缓存中是否有该域名对应的ip地址。如果是这样，它将直接从本地获得ip地址，然后访问它。如果不是，浏览器会向DNS服务器发送DNS请求，获取域名对应的ip地址，然后存储在本地缓存中，然后访问。

所以由于上述问题，我们只需要在本地伪造一个域名解析，然后通过伪造的域和目标域进行跨域请求。

在windows下，文件夹c : \ windows \ system32 \ drivers \等下有一个hosts文件。如果已经更换主机并来到Google的学生应该对此很熟悉，请将以下代码添加到hosts文件中：

17.0.0.1a .目标网站。com。

这样，你对a. target网站的访问。com与访问localhost相同。这样做的目的是为了方便本地服务的建立，这样本地服务和目标域名之间就不会出现跨域的问题。这样，您可以通过在目标网页中植入iframe标签，在本地向目标域发起跨域请求，并获取目标域的数据。

直接编码(使用jQuery)。

脚本代码，直接插入父域。

Var mySrc='http://a。target com :9000/myiframe . html '；Document.domain='目标网址。com '；//密钥代码，将域提升到根域$ ('body ')。追加(' iframe src=' my src ' name=' my iframe ' id=' getdata '/frame ')；//在目标网页中插入iframevar区间；函数start() { $('#getData ')。attr({ ' src ' : MYSRC })；interval=setInterval(function(){ window . myiframe . run(getLogitic))；//将回调函数传递给子域}，10000)} functionstop(){ clearinterval(interval)；}函数getLogitic(orderId) { $。ajax({ url: '/query '？orderId ' id=1 val code=temp=' math . random()，method: 'GET '，success : function(RES){ console . log(RES)；//你可以在这里调用子域的方法将数据传输到本地文件}，错误：函数(err) {console.log ('err 3360 '，err)；} })} iframe中的html代码。

！键入html lang=' en ' head meta charset=' utf-8 ' title document/title/head dyscript src=' http 3360 bower _ components/jquery/dist/jquery . js '/script script document . domain=' target web.com '；//关键代码，提升子域为根域var int函数run(callback) {//此请求用于向本地请求数据，然后根据本地数据，使用父域发送的回调函数向目标区域发起请求，获得目标区域的数据$。Ajax ({url: '。/getorderist . json '，//存储本地数据的地方，直接写一个JSON文件。它可以是数据库method:' get '中的数据，success:函数(RES){ vardata=RES . list；int=setInterval(函数(){回调(数据[0])；//执行父域传入的回调函数data . shift()；if(data . length===0)clearInterval(int)；}, 1000);}，错误：函数(err){ console . log(err)} })}/脚本/正文/html注意：

iframe只有提升到根域，才能与父窗口通信，document.domain指令只能将当前域提升到当前根域，这也是必须修改本地hosts文件的原因，也是解决跨域问题的根源。在抓取目标网页的数据之前，首先要看目标网页发送ajax请求的方式，获取请求的api，通过目标网页的控制台插入脚本，然后运行，获取要获取的数据，通过本地请求本地发送。以下是在物流查询网页中抓取物流信息的过程：

画成目标网址；这是将我的脚本插入目标网页。成功后，具有本地地址但与目标域相同域名的iframe将被插入到网页中。

结果

当请求成功时，可以在本地返回这些数据。

更多精彩内容，请点击《ajax跨域技术汇总》深入学习研究。

其实边肖也是最早知道的，现在还在学习探索的过程中，希望和大家一起学习进步。