Partage
  • Partager sur Facebook
  • Partager sur Twitter

Visualiser une page web dans une fenêtre modale

Sujet résolu
    31 janvier 2023 à 12:40:46

    Bonjour à tous,

    Ce matin je suis face à un problème assez simple probablement à résoudre, je travaille sur un site pour ma copropriété, nous voulons publier tous les articles de presse et toutes les réglementations concernant la rénovation énergétique de notre immeuble.

    J’obtiens la liste des articles très facilement, j’ai ma liste de lien, et maintenant je veux que lorsqu’on clique sur un lien, ce lien apparaisse soit dans un iframe mais y’a beaucoup d’inconvénients soit dans une popup (open.window) probablement bloquée par défaut par la plupart des navigateurs soit dans une fenêtre modale.

    Ma question est :

    Comment charger cette page Web qui soit «  navigable » ?

    D’avance merci pour vos conseils.

    • Partager sur Facebook
    • Partager sur Twitter
      1 février 2023 à 10:29:06

      Dans une nouvelle fenêtre ou dans un popup ? c'est différent . 
      tu peut attribuer un attribut target à ta balise <a href="" > 

      <a href="https://www.google.com" target="_blank">google dans une nouvelle fenêtre </a>
      
      <a href="https://www.google.com" target="nom_target">google dans une nouvelle fenêtre 'nom_target' </a>

      le premier lien affichera une nouvelle fenêtre à chaque clic. 
      Le deuxième lien affichera une nouvelle fenêtre dans un premier temps , puis s'actualisera quand on cliquera sur un lien avec le target 'nom_target'  

      • Partager sur Facebook
      • Partager sur Twitter

      la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

        1 février 2023 à 11:54:59

        Bonjour. La politique générale des navigateurs est de bloquer les pop-up qui s'ouvrent tout seul, mais pas lors d'un événement du à l'utilisateur (genre onclick).

        Cela dit, la façon de faire aujourd'hui, plus élégante, est de créer ou "révéler" un conteneur qui va se positionner par dessus la page. Tu trouveras des tas de tutos là-dessus.

        • Partager sur Facebook
        • Partager sur Twitter
          1 février 2023 à 13:32:18

          Merci pour vos réponses pertinentes.

          Domi65 j'aimerai investiguer ta solution, j'ai fait des recherches sur le web sans jamais trouver de choses probantes.

          As-tu qq pistes de tuto à proposer ?

          D'avance merci.

          • Partager sur Facebook
          • Partager sur Twitter
            2 février 2023 à 11:04:15

            Cette vidéo par exemple.

            EDIT

            Je viens de relire ton sujet.

            La solution proposée par Benjyben est celle que j'aurais choisie car il ne faut pas oublier qu'une page web est aussi visualisée par des smartphone. Partager le petit écran n'est pas agréable pour l'internaute.

            Sinon, l'iframe est une solution simple. Quels sont "inconvénients" auxquels tu te réfères ?

            -
            Edité par Domi65 2 février 2023 à 11:25:37

            • Partager sur Facebook
            • Partager sur Twitter
              2 février 2023 à 12:24:48

              Domi 65 merci pour ton nouveau retour.
              Le seul problème avec les iframe que j’aimerais utiliser est le problème du SAMEORIGN.
              Dans mon fichier d’appel en PHP j’ai mis en tête du fichier la directive “ header(‘Access-Control-Allow-Origin: *’)“.
              J’ai suivi la doc :

              Et j’obtiens toujours lorsque je charge le iframe avec par exemple inc-conso.fr la même erreur :

              Refused to display 'https://www.inc-conso.fr/content/1er-janvier-2023-les-regles-qui-changent' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

              Comment circumnaviguer cette restriction ?

              D'avance merci pour vos lumières dont j'ai bien besoin !
              • Partager sur Facebook
              • Partager sur Twitter
                3 février 2023 à 7:51:30

                bronson a écrit:


                Dans mon fichier d’appel en PHP j’ai mis en tête du fichier la directive “ header(‘Access-Control-Allow-Origin: *’)“.

                Tu dois mettre ça sur la page web que tu appelles dans ton iframe, pas dans ton fichier 'Parent'. 

                Plus d'info avec chatGPT : 

                Cette erreur signifie que la page web externe que vous essayez d'afficher a défini l'en-tête HTTP "X-Frame-Options" à "SAMEORIGIN", ce qui interdit l'affichage de la page dans un cadre en dehors de son domaine d'origine. tu ne peux pas contourner cette restriction en utilisant l'élément "iframe", car c'est est un mécanisme de sécurité pour protéger les sites web contre les attaques "clickjacking".

                Si tu contrôles la page web externe et souhaite autoriser l'affichage , tu peux supprimer l'en-tête "X-Frame-Options" ou le définir sur "ALLOW-FROM https://your-domain.com", où "your-domain.com" :  le domaine qui peut afficher la page dans une iframe.

                • Partager sur Facebook
                • Partager sur Twitter

                la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

                  3 février 2023 à 13:51:14

                  Bonjour à tous,

                  Je reviens vers vous j'ai regardé ces histoires " ALLOW-FROM https://your-domain.com ", rien ne fonctionne !

                  En farfouillant sur le Web je suis tombé sur cet article à propos des Iframe inline :

                  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

                  J'ai testé l'exemple qui fonctionne parfaitement !

                  J'ai changé l'url de l'exemple par 'https://www.inc-conso.fr/content/1er-janvier-2023-les-regles-qui-changent'

                  Plus rien ne fonctionne, Safari me renvoi " X-Frame-Options' to 'SAMEORIGIN'. ", Edge « inc-corso.fr a www.inc-conso.fr a refusé la connexion », Firefox : 

                  « Firefox ne peut pas ouvrir cette page

                  Pour protéger votre sécurité, www.inc-conso.fr ne permettra pas à Firefox d’afficher la page si celle-ci est intégrée par un autre site. Pour voir cette page, vous devez l’ouvrir dans une nouvelle fenêtre.

                  »

                  Chrome (mac) fonctionne parfaitement ! Grr, Grr, Grr, Grr, Grr

                  Pourquoi « https://www.openstreetmap.org » ça fonctionne bien mais pas avec le reste ?

                  Désolé pour mon insistance !


                  En savoir plus…

                  -
                  Edité par bronson 3 février 2023 à 13:55:03

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Visualiser une page web dans une fenêtre modale

                  × 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