应用iframe完成ajax跨域要求，抓取网页中ajax数据

2019年8月30日 162次阅读 来源: wangcong

怎样应用网页ajax要求暴露出来的接口去抓取网页数据？许多爬虫都能完成这个功用。不过本日要来和人人八一八单从前端的角度，应用js处理这个题目。

人人都晓得，在差别域的情况下是不能发送ajax要求的，浏览器会报以下毛病：

《应用iframe完成ajax跨域要求，抓取网页中ajax数据》

同时，内嵌的iframe中没法举行跨域通讯的，也就是说差别域的iframe是没法相互读取数据的(固然应用hash变化能够从父window传入数据到子iframe，不过并没有什么意义)。iframe跨域通讯时，浏览器会报以下毛病：

《应用iframe完成ajax跨域要求，抓取网页中ajax数据》

实在这两个题目都是因为跨域形成的。

下面就引见怎样处理这个题目。

实在题目标症结就在于，浏览器在剖析ajax要求地点时会和当前网页的地点举行比较，假如是跨域的，那就制止掉而且报错。那末我们假如让浏览器剖析出的ajax地点和当前网页的剖析地点一样，浏览器不就不会制止我们的要求了么。

那末浏览器是怎样剖析url的呢？

起首当浏览器接见一个域名时，会查询当地的DNS缓存中是不是有关于这个网址对应ip地点，假如有的话，直接从当地获得ip地点然后接见，假如没有，浏览器就会向DNS效劳器发出DNS要求获得该域名对应的ip地点然后存入当地缓存然后接见。

那末介于以上题目，我们只要在当地捏造一条域名的剖析体式格局，然后再经由历程捏造的域和目标域举行跨域要求不就能够了么。

windows下的翻开C:\Windows\System32\drivers\etc
这个文件夹下有一个hosts文件，假如悛改hosts来上谷歌的同砚对这个应当很熟悉，在hosts文件里加上如许一段代码：

127.0.0.1         a.目标网址.com

如许你的接见a.目标网址.com就和接见localhost一样了，如许做的目标是轻易搭起当地的效劳时，当地的效劳和目标的域名之间就不会存在跨域题目了，如许就能在当地，经由历程在目标网页植入iframe标签的体式格局，向目标域提议跨域要求，获得目标域的数据。

直接上代码(用了jQuery)

剧本代码，直接插在父域

var mySrc = "http://a.目标网址.com:9000/myIframe.html";

document.domain = "目标网址.com";     //症结代码，将域提拔到根域

$("body").append('<iframe src=' + mySrc + ' name="myIframe" id="getData"></frame>');     //向目标网页插进去iframe

var interval;

function start() {
    $("#getData").attr({"src": mySrc});
    interval = setInterval(function() {
        window.myIframe.run(getLogitic);    //向子域传入回调函数        
    },10000)
}

function stop() {
    clearInterval(interval);
}

function getLogitic(orderId) {
    $.ajax({
        url: '/query?'+ orderId +'&id=1&valicode=&temp=' + Math.random(),
        method: 'GET',
        success: function(res) {
            console.log(res);              //能够在此再挪用子域的要领，向当地文件传输数据
        },
        error: function(err) {
            console.log('err: ', err);
        }
    })
}

iframe中html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script>
        document.domain = "目标网址.com";    //症结代码，将子域提拔到根域
        var int;
        function run(callback) {
        //此要求用于向当地要求数据，然后依据当地的数据，应用父域传过来的回调函数向目标域提议要求，获得目标域的数据    
            $.ajax({
                url: './getOrderList.json',//当地数据存储的处所，偷懒直接写了个json文件，能够是数据库中的数据
                method: 'GET',
                success: function(res) {
                    var data = res.list;
                    int = setInterval(function(){
                        callback(data[0]);    //实行父域传入的回调函数
                        data.shift();
                        if (data.length === 0) clearInterval(int);
                    }, 1000);
                },
                error: function(err) {
                    console.log(err)
                }
            })
        }
    </script>
</body>
</html>

注重：

  1. 只要将iframe提拔到根域，如许才能与父window通讯，耳document.domain指令只能提拔当前域到当前的根域，这也是必需要修正当地hosts文件的缘由，这是处理跨域题目标基础。

  2. 在抓取目标网页数据之前，要先看目标网页发送ajax要求的体式格局，获得要求的api，经由历程目标网页的控制台插进去剧本，然后运转，获得要获得的数据，在经由历程和当地要求的体式格局，发送到当地。

下面是抓取某物流查询网页中物流信息的历程：

涂掉的为目标网址；这是向目标网页插进去我的剧本，胜利后网页中就会被插进去了一个地点为当地的，然则域名和目标域雷同的iframe。

《应用iframe完成ajax跨域要求，抓取网页中ajax数据》

效果

这些数据能够在要求胜利会传回当地。

《应用iframe完成ajax跨域要求，抓取网页中ajax数据》

末了，实在博主也是初识前端，还处在进修和探究当中，愿望能与人人一同进修提高，迎接人人指出文章中的毛病和不足，肯定虚心接受！

btw，首篇博文，愿望人人多多支撑！！！

    原文作者：wangcong
    原文地址: https://segmentfault.com/a/1190000004317347
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞