JavaScript-Ziel iFrame Dokuments Tutorial

Inline-Frames (iFrames) sind sehr ähnlich zu Frames und kann nützlich sein, wenn Sie Inhalt in Ihre aktuelle Webseite zu verschachteln möchten. Dies ist ein ähnliches Konzept auf die Bild-in-Bild-Funktionen, die auf viele Fernsehgeräte kommen. Der Inhalt des iFrame kann jedes beliebige Web-Seite oder ein Bild sein. Inline-Frames können Sie andere Windows Skripts ausführen, ohne tatsächlich die Seite verlassen zu öffnen, die Sie auf. Mit Skriptsprachen wie JavaScript können Sie mit dem Stil, der Positionierung und der Inhalt des iFrame interagieren.

Anweisungen

1 Fügen Sie einen iFrame in Ihre Webseite durch Kopieren und Einfügen den folgenden Code in den HTML-Körper. Der Code wird eine Webseite innerhalb der aktuellen Folie Schachteln. Die neue Seite werden 80 Prozent der Größe des Originals, wird einen dünnen Rand um ihn herum und haben eine Bildlaufleiste.

< Iframe Id = "FrmMain" Name = "FrmMain" scrolling = "yes"Width = "80 %" Height = "80 %" Frameborder = "1" >< / Iframe >

2 Erstellen Sie eine neue Schaltfläche auf Ihrer Web-Seite die JavaScript-Funktionen aufrufen, die Interaktion mit dem iFrame. Diese Schaltfläche ist eingerichtet, um den Funktionsaufruf "ChangeTarget."

< Schaltfläche "Id ="BtnChange"onclick="changeTarget() "> Änderung deiner < / Taste >

3 Platzieren Sie die JavaScript-Funktion unten im Head-Tag Ihrer Webseite. Diese Funktion findet das iFrame-Element auf der Webseite-Dokument und setzt seine Source-Attribut an eine neue Position.

< Skript-Typ = "Text/Javascript" >Funktion changeTarget(){Var myFrames = document.getElementById('frmMain');myFrame.src = "http://www.ehow.com";}< / script >

4 Ändern Sie die Größe des iFrame von Codezeilen ändern Sie den Stil in der Funktion "ChangeTarget." Um die Höhe und Breite des iFrame festzulegen, können Sie den folgenden Code.

myFrame.style.width = "600px";myFrame.style.height = "400px";

Tipps & Warnungen

• Achten Sie darauf, ein "Name" und "Id" für Ihre iFrame umfassen, damit es richtig in allen Browsern funktioniert.
• Um mit der Webseite zu interagieren, die iFrame aus innerhalb der iFrame selbst enthält, können Sie das übergeordnete Element wie folgt "parent.document.getElementById('frmMain')".
• Die Eigenschaft "Src" kann auf eine absolute oder relative URL festgelegt werden. Eine absolute URL ist einer, der den ganze "http://www.mysite.com" Pfad enthält während eine relative URL ein Dokument innerhalb Ihrer eigenen Website verweist, durch die Aufnahme nur Teil des Pfades "/ newpage.html".