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>
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!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So importieren Sie Lesezeichen aus anderen Browsern mit uc browser_Wow, um Lesezeichendaten mit dem UC -Browser zu importieren
Sep 24, 2025 am 10:36 AM
Sie können Lesezeichen von anderen Browsern über die UC -Browser -Importfunktion migrieren: Wählen Sie zuerst "Lesezeichen importieren" und autorisieren Sie Lesedaten. 2. Support Manual Import von HTML -Dateien. Sie müssen zuerst die Lesezeichen in HTML im Quellbrowser exportieren und den Dateiimport auswählen. 3.. Sie können auch über den Cloud -Service übertragen, die Cloud -Synchronisation aktiviert und die Lesezeichendaten im UC -Browser abziehen, um die Migration abzuschließen.
So erstellen Sie ein Vollbild-Hintergrundbild mit HTML
Sep 23, 2025 am 05:43 AM
Das Einrichten eines Hintergrundbildes mit Vollbild mit CSS kann durch direktes Stylen des Körpers oder mit einem Vollbildbehälter erreicht werden. 1. Stellen Sie die Hintergrundgröße fest, um mit Hintergrundposition zu decken und zusammenzuarbeiten: Zentrum, um sicherzustellen, dass das Bild abgedeckt und zentriert ist. 2. Beheben Sie optional den Hintergrund oder verwenden Sie Container, um das Layout flexibler zu steuern. 3.. Verwenden Sie eine hohe Auflösung, um das Bild zu optimieren, und fügen Sie Fallback -Farben hinzu, um die Erfahrung zu verbessern.
Was ist semantische HTML
Sep 25, 2025 am 02:37 AM
SemantichtmlusseMeaningfulTagslikearticle, Sektion, NAV und MaintoclearlydeFineContentStructureForBothDevelopers und Browser.TheseelementSmpropovesibilityByEnablingsCreenreaderTointerpretpagelayelayoutentive, EnhancanothroughthringScreeneRectentoranizanizierung
Was ist das Kopf -Tag in HTML?
Sep 24, 2025 am 06:47 AM
TheheadTagContainsMetadataandResourcesessentialforBrowserandSearchEngineprocessing, einschließlich Titel, Charakteren, Beschreibung, Stylesheets, Skripte und ViewPortsettings, AshowninthexamplewithProperhtmlstructure.
Wie man ein Video in HTML automatisch spielt
Sep 25, 2025 am 05:04 AM
Um eine automatische Video -Wiedergabe zu erreichen, muss das Video gedämpft werden. Verwenden Sie das Autoplay- und gedämpfte Eigenschaften, um sicherzustellen, dass HTML -Videos in modernen Browsern automatisch abgespielt werden. Wenn Sie Loops abspielen möchten, können Sie Schleifenattribute hinzufügen. Wenn Sie Steuerelemente entfernen, wird die Steuerleiste nicht angezeigt.
So erstellen Sie eine einfache Bildergalerie in HTML
Sep 25, 2025 am 01:20 AM
Erstellen Sie eine HTML -Struktur, verwenden Sie DIV -Container und IMG -Tags, um Bilder hinzuzufügen. 2. Setzen Sie das Flex- oder Netzlayout mit CSS, Abstand und Stile ein. 3.. Responsive Design durch Medienabfragen implementieren; 4. Fügen Sie optional Bildbehälter mit Text hinzu, um den Titel anzuzeigen.
Was ist der Unterschied zwischen Q- und Blockquote -Tags in HTML?
Sep 25, 2025 am 06:14 AM
Das Q -Tag wird für kurze Inline -Zitate verwendet, die für kurze Zitate in Sätzen geeignet sind, und Browser fügen normalerweise automatisch Zitate hinzu. 2. Das Blockquote -Tag wird für unabhängige Zitate mit langen Absätzen verwendet, häufig mit Einrückung zur visuellen Unterscheidung und unterstützt die Quelle, die durch Zitattribute gekennzeichnet ist. 3. Die Wahl von Q oder Blockquote sollte auf der Länge und dem Kontext des Zitats basieren, die beide die Semantik und Zugänglichkeit des Inhalts verbessern.
Wie benutze ich das Meter -Tag in HTML?
Sep 23, 2025 am 05:38 AM
ThemetagdiplaysscalarmeasurementsWithinarange, suchasdiskusageErtestScores, verwenden Value, max, max, niedrig, hoch undoptimumattributes;
