Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ouvrir un lien cliquable présent sur une page web

Sélectionner deux liens sur un page web et les ouvrir

    14 juin 2019 à 18:50:24

    Bonjour  à tout.

    Je suis nouveau en Javascript et j'ai un souci. 

    Je veux à partir d'une page web, sélectionner aléatoirement deux liens sur la page en cours de consultation et les ouvrir en même temps.

    En effet mon but est de pouvoir avoir les screenshots des trois pages en utilisant un éditeur comme PhantomJS ( Tout autre équivalent de phantomJS me sera la bien venue ): celle en cours de consultation et les deux autres ouverts.

    Le code suivant me donne déjà le script screenshots de la page en cours.

    Je vous remercie d'avance.

    var page = require('webpage').create();
    
    page.open('https://www.malekal.com/fichier-hosts/', function(status) {
    	console.log("status:" + status );
    	
    	if(status === "success"){
            page.render('exemp.png');
    	}
        phantom.exit();
    
    });


    -
    Edité par LionelNoutegne 14 juin 2019 à 18:59:58

    • Partager sur Facebook
    • Partager sur Twitter
      14 juin 2019 à 19:41:11

      Salut,

      pourquoi tu veux faire ça ?

      prendre des liens au hasard sur un site web n'apportera rien de bien, tu peut tomber sur n'importe quel lien, même les moins intéressants, comme les cgu. Tu peut aussi tomber sur des liens externes, donc il faut faire un check pour ne prendre que des liens interne au site.

      De plus il faut prendre en compte le fait que certains sites sont en js, et n'ont pas vraiment de lien href, juste des boutons avec des actions qui s’exécutent lors d’événements click.

      Sans plus de contexte sur pourquoi tu veux faire ça, et quel est le résultat attendu, ça me semble difficile. Tu peut toujours récupérer tous les liens qui matchent {protocol}://{domain}/ mais je me demande bien ce que ça va donner au niveau screenshot, sans doute pas grand chose.

      • Partager sur Facebook
      • Partager sur Twitter
        14 juin 2019 à 21:29:17

        Merci d'avoir pris le temps de me répondre.



        En fait j'ai besoin de comparer identité visuelle d'un site. Et les images vont être utilisées dans un algorithme de similarité. 

        J'ai ma base de données des URL et je veux donc qu'à  près avoir ouvert une page, je puis avoir la possibilité d'avoir le screenshot des autres pages du même domaine.

        Donc en sortir PhantomJS doit me donner les images de chaque page . Donc pour une URL j'ai trois images en sortir.

        S'il y a des site en JS qui ne permettent pas cela , tant mieux. J'ai plusieurs URL et je me suis dis qu'il y a certainement qui pourrait permettre cela.


        Merci 

        • Partager sur Facebook
        • Partager sur Twitter
          15 juin 2019 à 0:05:53

          Salut,

          je ne connais pas phantomjs, mais je suppose que c'est pareil que chrome headless,

          donc tu fois pouvoir faire :

          let links = document.querySelectorAll('a[href]');
          
          links.forEach(link => {
          console.log(link)
          })

          une demo dans un navigateur :

          https://jsfiddle.net/lk77/ds04n3wp/

          il doit être possible de faire pareil avec phantomjs

          -
          Edité par lk77 15 juin 2019 à 0:34:07

          • Partager sur Facebook
          • Partager sur Twitter
            15 juin 2019 à 1:02:30

            Salut IK77,

            déjà merci beaucoup pour vos interventions.

            Je viens de regarder chrome headless, et vous avez raison apparemment ça va dans la même logique que phantomJs et ça pourrait m'aider dans la mesure où ça fonctionne aussi sur Jupyter Notebook alors que phantoms n'est plus compatible sur jupyter notebook cas j'ai lu hier soir qu'ils avaient suspendu le développement de phantomJs.

            Je vais regarder la documentation de chrome headless et je vous reviens si j'ai des difficultés.

            Merci beaucoup.

            • Partager sur Facebook
            • Partager sur Twitter
              16 juin 2019 à 4:16:10

               Salut Ik77,
              merci de prendre votre temps pour me répondre.
              C'est vrai que je n'ai toujours rien d’intéressant , j'essaye de comprendre cette démo même si  j'ai des zones d'ombres.
              Si je dois essayer de clarifier mon  problème, j'ai besoin de la capture de la page de https://github.com/events par exemple et non le Screenshots de l'URL.
              donc le script doit ouvrir L’URL et prendre une capture et me retourner l'IMAGE associée ceci pour la page en cour et les deux liens pris sur celle-ci.
              Merci
              • Partager sur Facebook
              • Partager sur Twitter
                16 juin 2019 à 11:51:58

                Salut,

                oui mais une fois que tu as les urls, tu peut t'en servir, pour naviguer et prendre des screenshot :

                moi en php j'ai ça par exemple :

                $browser->visit('url')->screenshot('test.png')

                donc tu dois avoir la même logique avec nodejs, après ça dépend du paquet que t'utilise pour communiquer avec chrome headless, et des méthodes qu'il te propose.

                • Partager sur Facebook
                • Partager sur Twitter
                  26 juin 2019 à 18:40:21

                  Salut  Ik77, 

                  j’espère que vous vous portez bien.

                  C'est vrai que je n'ai toujours pas eu de résultat à mon problème. Bref j'ai pu regarder Chrome headless et Selenium et j'ai tout installé.

                  Je travaille en python et sur Jupyter notebook et je parviens à avoir le screenshot de la page en cours mais toujours par les autres sélectionnées au hasard

                  from selenium import webdriver
                  
                  chrome_options = webdriver.ChromeOptions()
                  chrome_options.add_argument('--headless')
                  
                  driver = webdriver.Chrome('/home/leonel/projet_/chromedriver')
                  driver.get('https://openclassrooms.com/forum/sujet/ouvrir-un-lien-cliquable-present-sur-une-page-web#93235610')
                  driver.get_screenshot_as_file('/home/leonel/projet_/screenshot.png')
                  print(driver.title)

                  Merci 

                  • Partager sur Facebook
                  • Partager sur Twitter
                    27 juin 2019 à 2:23:32

                    Bonjour, je ne vois qu'un seul appel demander dans ce code, donc surement normal qu'il renvoie qu'une page.

                    Si ca peut aider je pense qu'il faudrait au préalable prendre tous les chemins voulu, puis de get chaque file et enfin les rendres en screenshot donc une boucle ou un manager qui gére chaque timeout loading(c'est a dire prendre le temps de vérifier qu'un traitement est finits avant d'entamer les autres), au choix.

                    Je ne connaît pas cette méthode (mais cela ne me semble pas sorcier pour autant)pour ma part j'utilisait html2canvas pour rendre du dom ou une page entiére par le body.

                    Après visiblement cela fonctionne je vois qu'il demande de prendre le fichier avec get je pense équivalent de file_gets_content en php puis prend le screenshot de la page.

                    donc comme je disait, il faut établir chaque page voulu avant puis de boucler sur get puis get screenshot.

                    Sinon pour les liens ca aurait étais cool d'établir un bot qui snif toutes les page indexer puis tous les liens qui s'y trouve en plus il pourra dire si tel ou tel link est corrompu ou obsoléte et par ce fait obtenir toutes les correspondance de lien page contenu sur le site ou directement chaque page du site.

                    En ésperant avoir aider++

                    • Partager sur Facebook
                    • Partager sur Twitter
                      27 juin 2019 à 2:55:01

                      Salut  Emmanue,

                      merci de prendre ton temps pour répondre a ma préoccupation.  Justement tu  as raison, ce code est pour la page encours et je travail en python avec Chrome headless et selenium  sur Jupyther et on peut bien intégrer le code JavaScript dans python.

                      Je me demande juste comment boucler pour avoir les autres Screenshots . En fait J'ai ma base de données des URL et je veux donc qu'à  près avoir ouvert une page, je puis avoir la possibilité d'avoir le Screenshots des autres pages du même domaine (Je sélectionne le lien [href], j'ouvre ,je prends son Screenshots et je ferme).

                      Donc en sortir Chrome headless doit me donner les JavaScript de chaque page . Donc pour une URL j'ai trois Screenshots en sortir dans mon fichier.

                      S'il y a des site en JavaScript qui ne permettent pas cela , tant mieux. J'ai plusieurs URL et je me suis dis qu'il y a certainement qui pourrait permettre cela.

                      Merci 

                      • Partager sur Facebook
                      • Partager sur Twitter
                        27 juin 2019 à 3:16:02

                        Ok donc si y'as les url je pense que la solution et de terminer par un loading qui se déclenche dés qu'une page est finits de scrennshooter lol

                        puis de vérifier en implémentant une limites la fin de l'opération laoding pour les images il y'as l'event load il déclenche une autre function dés que le chargement de l'image est finits. exemple

                        //declare l'image
                        var image = new Image();
                        //doit etre declarez juste avant la définition de la source
                        image.addEventListener('load', appendImg);
                        
                        image.src= "http://lientolien";
                        
                        function appendImg()
                        {
                        //peut effectuer un autre code la premiere image a finit de charger
                        }

                        Sinon bas y'as les boucle for et while python dois bien intégrez cela aussis je pense mais vu que c'est des images qu'il fauts obtenir il faut normalement s'assurez qu'elle se download bien avant d'effectuer un nouveau chargement. Faut voire au niveau cadence de python pour ca enfin moi je connait plus php js pour gerez ca.

                        D'ailleurs mon premier site porte sur le traitements d'images par lot donc j'ai du apprendre a gérez ca.

                        et je pense que la méthode get peut tous simplement prendre un fichier même si il est pas ouvert? genre comme file_get_content?

                        -
                        Edité par leo_sky 27 juin 2019 à 3:20:17

                        • Partager sur Facebook
                        • Partager sur Twitter
                          27 juin 2019 à 12:14:16

                          Salut Emmanue,

                          merci de votre intervention, c'est vrai que ça m’oriente vraiment.

                          Bref, je veux des que la première URL est chargée, la page s'ouvre, je prends son Screenshot  et sur cette page je choisi deux Href (lien cliquable) de façon random (Aléatoirement) , je les ouvre et je leur Screenshots. Et je retourne dans mon dossier les trois Screenshot.

                          Donc je n'ai pas besoin d'une liste de lien a priori. Bref c'est un peu ça ma difficulté et ce que je pense.  Meme si c'est en php il y'a pas de problème .

                          Merci

                          • Partager sur Facebook
                          • Partager sur Twitter
                            4 juillet 2019 à 2:54:50

                            ok je pensait a quelquechose comme suit pour ton exemple vu que le load de l'image visiblement ne passe pas par js. mais que les ouverture est touts sont js.

                            var lien, indice, tmpLien = [], couter = 1;
                            
                            var nbr_lien_a_choisir = 2;
                            
                            var page = require('webpage').create();
                            
                            //ouvre la page
                            page.open('https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/random', function(status) {
                                console.log("status:" + status );
                                 
                                if(status === "success"){
                                    page.render('exemp'+counter+'.png');
                            		counter++;
                            		
                            		lien = document.getElementsByTagName('li');
                            		
                            		for(var i = 0;i < nbr_lien_a_choisir;i++)
                            		{
                            			//choisit un nombre entre un chiffre min inclue et max inclue
                            			indice = getRandomIntInclusive(0, lien.length - 1);
                            			tmpLien.push(lien[indice]);
                            			//ca serait bein de check les lien verifier si c'est bien une url avant de l'ouvrir
                            			//après ca peut fonctionner aussi pour autre chose que les url
                            			//mais ca serait plus nikel
                            			interSwitch();
                            		}
                            		
                                }
                             
                            });
                            
                            function interSwitch()
                            {
                            	//si le tableaux des lien a toujours un path a traiter
                            	
                            	if(tmplien.length > 1)
                            	{
                            		//pour fermer fenetre précedente page close
                            		//page.close();
                            		
                            		page = require('webpage').create();
                            		path = tmpLien.shift();
                            	
                            		page.open(path, function(status) {
                            		console.log("status:" + status );
                            		 
                            			if(status === "success"){
                            				page.render('exemp'+counter+'.png');
                            				counter++;
                            				interSwitch();
                            				
                            			}
                            		 
                            		});
                            	}
                            	else
                            	{
                            		//quit une fois finit
                            		phantom.exit();
                            	}
                            }
                            
                            function getRandomIntInclusive(min, max) {
                              min = Math.ceil(min);
                              max = Math.floor(max);
                              return Math.floor(Math.random() * (max - min +1)) + min;
                            }

                            document.getElementByTagName('li') est une selection de tous les liens en js puis après je les choisit aléatoire par le nombre voulu d'itération donc de page en plus de la première, je stocke dans tableaux.

                            Tant que le tableaux est plein j'iter ton premier code et quit seulement quand le tableaux de lien choisit ets vide

                            a voire si ca t'aide , j'ai repris ton premier code et les modifier.

                            -
                            Edité par leo_sky 4 juillet 2019 à 3:11:06

                            • Partager sur Facebook
                            • Partager sur Twitter

                            Ouvrir un lien cliquable présent sur une page web

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                            • Editeur
                            • Markdown