Javascript Target iFrame Document Tutorial

Javascript Target iFrame Document Tutorial


Inline Frames (iframes) er svært lik rammer og kan være nyttig når du trenger å hekke innholdet i din nåværende nettside. Dette er et lignende konsept til bilde-i-bilde-funksjoner som kommer på mange TV-apparater. Innholdet i iFrame kan være en hvilken som helst nettside eller bilde. Innebygde rammer kan også tillate deg å åpne opp andre vinduer for å kjøre skript uten egentlig å forlate siden du er på. Med skriptspråk som Javascript, kan du samhandle med stil, posisjonering og innholdet i iFrame.

Bruksanvisning

1 Legg en iFrame til nettsiden din ved å kopiere og lime inn koden nedenfor i HTML kroppen. Koden vil reir en nettside innenfor den nåværende. Den nye siden vil være 80 prosent av størrelsen på den opprinnelige, vil ha en tynn ramme rundt det, og vil ha et rullefelt.

<Iframe id = "frmMain" name = "frmMain" scrolling = "ja"
width = "80%" height = "80%" frameborder = "1"> </ iframe>

2 Opprett en ny knapp på din nettside for å ringe Javascript-funksjoner som vil samhandle med iFrame. Denne knappen er satt opp til å kalle funksjonen "changeTarget."

<-knappen Id = "btnChange" onclick = "changeTarget ()"> Endre Target </ knapp>

3 Plasser Javascript-funksjonen nedenfor i hodet tag på nettsiden din. Denne funksjonen finner iFrame element på nettsiden dokument og setter sin kilde attributt til et nytt sted.

<Script type = "text / javascript">
fungere changeTarget ()
{
Var myFrame = document.getElementById ( 'frmMain');
myFrame.src = "http://www.ehow.com";
}
</ Script>

4 Endre størrelsen på iFrame ved å legge linjer med kode for å endre stilen i funksjonen "changeTarget." Hvis du vil angi høyden og bredden på iFrame, kan du bruke koden under.

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

Hint

  • Sørg for å inkludere både et "navn" og en "id" for iFrame slik at den vil fungere riktig i alle nettlesere.
  • Hvis du vil kommunisere med web siden som inneholder iFrame fra innenfor iFrame selv, kan du bruke den overordnede element som følger "parent.document.getElementById ( 'frmMain')".
  • Den "src" eiendom kan settes til enten en absolutt eller relativ URL. En absolutt URL er en som omfatter hele "http://www.mysite.com" banen, mens en relativ URL refererer til et dokument på ditt eget nettsted ved bare inkludert en del av banen "/newpage.html".