Wie schneide ich einen IFrame in HTML zu?-HTML-Tutorial-php.cn

Wie schneide ich einen IFrame in HTML zu?

WBOY

Freigeben： 2023-08-29 16:33:16

nach vorne

872 Leute haben es durchsucht

Wie schneide ich einen IFrame in HTML zu?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!