Sådan tilføjes en Luk knap på en IFRAME

March 25

Sådan tilføjes en Luk knap på en IFRAME

IFRAMES tillader webudviklere at oprette websteder inden hjemmesider. For eksempel ved at tilføje en simpel IFRAME tag til din webside, kan du vise besøgende en live webcam fra et andet websted eller endda en side fra en af ​​dine egne websteder. IFRAMES har ikke menuer eller knapper. Hvis du vil lukke en IFRAME objekt, skal du tilføje et "Luk" knappen til din webside og skabe et tæt begivenhed at skjule IFRAME.

Vejledning


• Åbn Notesblok eller din HTML editor og oprette et nyt dokument.

• Tilføj denne HTML-kode til dokumentet: <DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional!. DTD "> <html xmlns =" ​​http://www.w3.org/1999/xhtml "> <head> <title> Tilføj JavaScript Efter dette afsnit </ title> </ head> <body> <input id =" MyCloseButton "type =" knappen "value =" Luk dette Iframe "/> <div id =" DivIframe "> <iframe src =" http://www.whitehouse.gov "width =" 80% "height =" 50% "/> </ div> </ body> </ html> Denne kode opretter en IFRAME og en knap, der lukker det. Iframe'S "src" ejendom får den til at vise Whitehouse hjemmeside. A "div" tag omgiver IFRAME erklæring. Bemærk at "div" tag har et id værdien "DivIframe." Dette er en vigtig værdi. JavaScript-kode bruger denne værdi til at identificere IFRAME.

• Tilføj denne JavaScript-kode, efter at dokumentet er "title" sektionen: <script language = "JavaScript" type = "text / javascript"> // Linje 1 var tæt Button = "MyCloseButton"; // Lines 2-3 window.onload = SetupButton; funktion SetupButton () {// Linje 4 var objButton = document.getElementById (CLOSE); // Lines 5-8 hvis (objButton.addEventListener) objButton.addEventListener ("klik", function () {closeIframe ()}, falsk); ellers hvis (objButton.attachEvent) objButton.attachEvent ("onclick", function () {closeIframe ()}); } // Lines 9-11 funktion closeIframe () {objDivIframe = document.getElementById (divIframe); objDivIframe.style.display = "none"; } </ Script> Linje man sætter "CLOSE" variabel. I dette eksempel, at variablens værdi "MyCloseButton" matcher ID af knappen er defineret i det foregående trin. Linje 2 til 3 oprette en funktion med navnet "SetupButton." Denne funktion kører, når en browser indlæser websiden. Lines 4 til 8 oprette et klik event handler. Denne event handler kalder funktionen med navnet "closeIframe", når du klikker på knappen over IFRAME. Linjer ni gennem elleve få en henvisning til "div" objekt og skjule det.

• Gem HTML-dokumentet. Åbn din browser og indlæse den doument. Iframe, der indeholder Whitehouse hjemmeside vil blive vist under "Luk dette Iframe" knappen.

• Klik på knappen. JavaScript-koden vil udføre og lukke IFRAME.