一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 工具
  • 开发技术分享

    chrome获取jsonp回调数据

    技术 202 2022-01-18 09:51

    老规矩 先说需求:

    我们的需求是想要拿到某个网站里面的数据:

    这段数据的URL来源是:

    https://mdskip.taobao.com/core/initItemDetail.htm?isUseInventoryCenter=false&cartEnable=true&service3C=false&isApparel=false&isSecKill=false&tmallBuySupport=true&isAreaSell=false&tryBeforeBuy=false&offlineShop=false&itemId=522802245459&showShopProm=false&isPurchaseMallPage=false&itemGmtModified=1642442936000&isRegionLevel=false&household=false&sellerPreview=false&queryMemberRight=true&addressLevel=2&isForbidBuyItem=false&callback=setMdskip&timestamp=1642470796183&isg=eBPzGrIHg9nKQk3ZBOfwourza77OSIRAguPzaNbMiOCPO0f65jFOW6KySjTBC3GVh60HR3WK4ADbBeYBq_C-nxvOa6Fy_Ckmn&isg2=BJqaN138r3PdMyPn-l1dlvRA60C8yx6lcfVqt6QTRi34FzpRjFtutWAm5-OLx5Y9Prom=false&isPurchaseMallPage=false&itemGmtModified=1642442936000&isRegionLevel=false&household=false&sellerPreview=false&queryMemberRight=true&addressLevel=2&isForbidBuyItem=false&callback=setMdskip&timestamp=1642470796183&isg=eBPzGrIHg9nKQk3ZBOfwourza77OSIRAguPzaNbMiOCPO0f65jFOW6KySjTBC3GVh60HR3WK4ADbBeYBq_C-nxvOa6Fy_Ckmn&isg2=BJqaN138r3PdMyPn-l1dlvRA60C8yx6lcfVqt6QTRi34FzpRjFtutWAm5-OLx5Y9

    正常来讲这是xhr的请求 但是它被network归类于js

    我们仔细分析一下这段url 发现这是一个Jsonp的请求

    关键词:

    callback=setMdskip
    

    关于jsonp的简单说明参考:https://blog.51cto.com/u_8371379/1902418

    然后知道了这是一个jsonp的请求,

    我们的思路是:

    在这个script嵌入之前 先声明callback方法

    静静等待jsonp来调用我们就可以了,而且也不会影响到原来的逻辑:

    类似于重写方法:参考之前的文章 函数盗用

    具体代码:

    页面首屏加载嵌入setMdskip方法:

    var s = document.createElement("script");
    s.id = "kiwi_test_id";
    
    s.innerHTML = "function setMdskip(data){console.log('data??????:::::',data)}";
    document.body.appendChild(s);
    

    完事就等待页面的中的这个script调用就可以了

    其实很简单...

    下课!


    后续更新:

    之后发现这些做会影响到之前的函数的原逻辑

    所以我们需要把我们之前重写的方法 复制一份

    基本的逻辑可以用es6的拓展运算符来解释

    {
     ...initFunc
    customFunc
    }
    

    OK,解释完之后开始写代码:

      let script = document.createElement("script");
        script.id = "tianmaoDisPriceCallBack";
        script.innerHTML = `
               // 复制方法 后面改写方法之后 再调用复制的方法,目的就是为了不影响原方法的逻辑
                let setMdskip_copy = setMdskip
                function setMdskip_crawler(data){
                  console.log("天猫data:", data);
                  setMdskip_copy(data)
                }
                setMdskip = setMdskip_crawler
            `;
          document.body.appendChild(script);
    

    下课!