WebHU - Programozási kérdések és válaszok

Létrehoz egy listát a fejlesztői eszközökben megjelenő hálózati kérésekről Javascript használatával?

Megpróbálok listát készíteni az alább felsorolt ​​kérések összes URL-jéről.

adja meg itt a kép leírását

Találtam egy hasonló kérdést a keresett pontos eredmények nélkül itt: Hogyan lehet elérni a hálózati kérések listáját HTML segítségével. Olyan függvényt szeretnék létrehozni, amely a háttérben figyel, és folyamatosan új kéréseket ad a listához. A legközelebbi válasz, amit találtam, nem egy teljes lista.

31.07.2019

  • Meg tudná-e adni, hogy ezzel mérőszámokat kíván-e gyűjteni a felhasználók gépein, vagy ez az Ön fejlesztési célja? Fejlesztési célból használhat proxyt, például Charles-t, vagy elfoghatja a kéréseket a Puppeteer segítségével. A válasz erre a kérdésre az Ön felhasználási esetétől függ. 31.07.2019
  • @JoeFrambach A webhelyem fejlesztési célját szolgálja. Meg kell szereznem az összes URL-t, hogy megnézzem, van-e olyan URL, amely X-nél több kérést küld 31.07.2019

Válaszok:


1

Ehhez megpróbálhatja az XMLHttpRequest használatával kérést küldeni a kívánt URL-re, majd kezelni a választ az Ön igényeinek megfelelő állapotkóddal.

    var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};
req.send(null);

Forrás: https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Ahogy fentebb írt egy megjegyzést, megtanítom, hogyan navigálhat egy olyan webhelyen, amely összegyűjti a html-t elemző összes külső vagy belső hivatkozást.

Szerezd meg valahogy a linket, majd küldd el a getHtml() függvénybe, javaslom, hogy próbáld ki ezt az Index.html-t

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <style>
        p{
            margin: 0px;
            margin-block-end: 0px;
            margin-bottom: 0px;
        }
    </style>
</head>
<body>


    <input type="text" id="link">Ingrese enlace
    <button onclick="getHtml(document.getElementById('link').value)">Get External Content</button>

    <div id="div1"></div>
</body>
</html>

main.js

function getHref(links, as){
    var as_length = as.length;
    var links_length = links.length;
    for (let index = 0; index < as_length; index++) {
        var element = as[index].href;
        $("#div1").html($("#div1").html()+`<br>> ${element}`);

        if(element.indexOf(window.location.href)>-1){
            $("#div1").html($("#div1").html()+` - <p style='color:purple;'> current path DETECTED action: discarting... </p>`);
            element="0";

         } 

        if(element.indexOf("file:///C:/") > -1) {
            element = element.replace("file:///C:/", initiator);
            $("#div1").html($("#div1").html()+` -   ${element}`);
         }
         else if(element.indexOf(initiator)> -1){
            $("#div1").html($("#div1").html()+` - ${element}`);

         }
         else if(element.indexOf("file://") > -1) {
            element = element.replace("file://", initiator);
            $("#div1").html($("#div1").html()+` - <p style='color:red;'> External domain DETECTED action: discarting...</p>`);

         }
         else if(element.indexOf("mailto:") > -1) {
           element =0;
            $("#div1").html($("#div1").html()+` - <p style='color:cyan;'> External action DETECTED action: discarting... </p>`);
         }
         else if(element.indexOf("tel:") > -1) {
            element=0;
            $("#div1").html($("#div1").html()+` - <p style='color:cyan;'> External action DETECTED action: discarting...</p>`);
         }


         getHtmlChild(element);




    } 
}
function parseHtml(htmls)
{  // console.log(html);

    $("#div1").html($("#div1").html()+"<br>>Parsing...");
    var ele = document.createElement('div');
    ele.innerHTML = htmls;
    console.log(ele);
    var link_tag = ele.getElementsByTagName('link');
    var a_tag = ele.getElementsByTagName('a');
    $("#div1").html($("#div1").html()+`<br>>found ${link_tag.length} <b><u>link</u></b> tags and ${a_tag.length} <b><u>a</u></b> tags., BAD TAGS ARE ELIMINATED! `);
    getHref(link_tag, a_tag);
    //console.log(link_tag[0].href);
}
function getHtml(urls){
    console.log("INICIADOR:" + urls);
    if(urls[urls.length-1]!="/"){
        urls = urls+"/";

    }    
    initiator=urls;
    proceses++;
    $.ajax({
        url: `${urls}`,
        method: "GET",
        crossDomain: true,
        success: function(data) {
            $("#div1").html(">Content is succefull gathered....");
            parseHtml(data);
        }
    });
}

Megjeleníti az összes linket :)

31.07.2019

2

Használja a Puppeteert nem fej nélküli módban (fejes? fejjel?), az elfogás segítségével a hálózati kérések naplózására. Tekintse meg a Puppeteer dokumentációját: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionvalue.

Másolva és módosítva:

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('request', interceptedRequest => {
    console.log(interceptedRequest.url());
    interceptedRequest.continue();
  });
  await page.goto('https://example.com');
  await browser.close();
});
01.08.2019
Új anyagok

A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..