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