Comment recadrer un IFrame en HTML ?-tutoriel HTML-php.cn

Comment recadrer un IFrame en HTML ?

WBOY

Libérer： 2023-08-29 16:33:16

avant

874 Les gens l'ont consulté

Comment recadrer un IFrame en HTML ?

Les frames en ligne sont appelés iframes en HTML. Une balise spécifie une zone rectangulaire dans le contenu où le navigateur peut afficher différents documents avec des barres de défilement et des bordures. Pour intégrer un autre document dans le document HTML actuel, utilisez des cadres en ligne.

Vous pouvez spécifier une référence à l'élément en utilisant l'attribut HTML iframe name. En JavaScript, les références aux éléments sont également faites à l'aide de l'attribut name. Une iframe est essentiellement utilisée pour afficher une page Web dans la page Web actuellement affichée. L'URL du document contenant l'iframe est spécifiée à l'aide de l'attribut "src".

Grammaire

Voici la syntaxe du HTML

<iframe src="URL" title="description"></iframe>

Copier après la connexion

Pour mieux comprendre comment recadrer une iframe HTML, regardons l'exemple suivant.

Exemple

Ci-dessous, nous utilisons un div pour que l'iframe soit tronquée et que le défilement de l'iframe n'affiche pas sa sortie.

<!DOCTYPE html>
<html>
   <body>
      <div style="position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
         <div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
         </div>
         <iframe src="https://www.tutorialspoint.com/index.htm" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
         </iframe>
      </div>
   </body>
</html>

Copier après la connexion

Lorsque le script s'exécute, il génère une sortie composée d'une iframe recadrée et intégrée à la page Web sans options de défilement.

Exemple

Considérez l'exemple suivant dans lequel nous utilisons la classe div et CSS dans une iframe pour recadrer et afficher sa sortie.

<!DOCTYPE html>
<html>
   <body>
      <style>
         iframe {
            position: fixed;
            top: -40px;
            left: 0;
            bottom: 0;
            right: 0;
            width: 65%;
            height: 70%;
            border: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            z-index: 999999;
         }
      </style>
      <div class="iframe">
         <iframe src="https://www.tutorialspoint.com/index.htm"></iframe>
      </div>
   </body>
</html>

Copier après la connexion

Lors de l'exécution du script ci-dessus, une fenêtre de sortie apparaîtra montrant l'iframe qui est recadrée et défilée pour être affichée sur la page Web.

Exemple

Exécutez le code ci-dessous et observez comment nous recadrons l'iframe en exécutant le script et en définissant le défilement sur non.

<!DOCTYPE html>
<html>
   <body>
      <style>
         body {
            margin: 0;
            padding: 0;
            height: 100vh;
         }
         h1 {
            font-family: Impact, sans-serif;
            color: #8E44AD;
         }
         iframe {
            width: 1024px;
            height: calc(100vh - 300px);
            overflow: hidden;
            margin: 0 auto;
            border: none;
         }
      </style>
      <h1 id="tutorial">TutorialsPoint</h1>
      <p>The Best E-Way Learning</p>
      <iframe id="booking-content" title="booking-content" src="https://www.tutorialspoint.com/index.htm" scrolling="no" allowfullscreen="allowfullscreen">
      </iframe>
      <script>
         let tutorial = 0;
         let element = document.getElementById('tutorial');
         while (element.nodeName !== 'IFRAME') {
            tutorial += element.offsetHeight;
            element = element.nextElementSibling;
         }
         tutorial = window.innerHeight - tutorial - 100;
         document.querySelector('iframe').style.height = tutorial + 'px';
      </script>
   </body>
</html>

Copier après la connexion