Heim > Artikel > Web-Frontend > Wie schneide ich einen IFrame in HTML zu?

Wie schneide ich einen IFrame in HTML zu?

WBOYnach vorne: 2023-08-29 16:33:16874Durchsuche

Inline-Frames werden in HTML als Iframes bezeichnet. Ein Tag gibt einen rechteckigen Bereich innerhalb des Inhalts an, in dem der Browser verschiedene Dokumente mit Bildlaufleisten und Rändern anzeigen kann. Um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten, verwenden Sie Inline-Frames.

Sie können mithilfe des HTML-Iframe-Namensattributs einen Verweis auf das -Element angeben. In JavaScript werden Verweise auf Elemente auch über das Namensattribut hergestellt. Ein Iframe wird im Wesentlichen verwendet, um eine Webseite innerhalb der aktuell angezeigten Webseite anzuzeigen. Die URL des Dokuments, das den Iframe enthält, wird über das Attribut „src“ angegeben.

Grammatik

Das Folgende ist die Syntax von HTML

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

Um besser zu verstehen, wie man HTML-Iframes zuschneidet, schauen wir uns das folgende Beispiel an.

Beispiel

Unten verwenden wir ein div, damit der Iframe abgeschnitten wird und beim Scrollen des Iframes seine Ausgabe nicht angezeigt wird.

<!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>

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die aus einem Iframe besteht, der zugeschnitten und ohne scrollbare Optionen in die Webseite eingebettet wird.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir die div-Klasse und CSS in einem Iframe verwenden, um dessen Ausgabe zuzuschneiden und anzuzeigen.

<!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>

Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster angezeigt, in dem der Iframe angezeigt wird, der zugeschnitten und gescrollt wird, um auf der Webseite angezeigt zu werden.

Beispiel

Führen Sie den folgenden Code aus und beobachten Sie, wie wir den Iframe zuschneiden, indem wir das Skript ausführen und „scrollable“ auf „Nein“ setzen.

<!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>

Ausgabe

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die den Text sowie den zugeschnittenen Iframe enthält, wodurch der Bildlauf auf „Keine“ reduziert wird.

Das obige ist der detaillierte Inhalt vonWie schneide ich einen IFrame in HTML zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie zeige ich Ruby-Kommentare für Text in HTML5 an?Nächster Artikel：Wie zeige ich Ruby-Kommentare für Text in HTML5 an?

In Verbindung stehende Artikel

Mehr sehen