In acest tutorial este prezentat modul de preluarea si modificare a continutului unui IFRAME, din pagina principala, folosind JavaScript.
Este important de mentionat ca pagina care este inclusa in IFrame trebuie sa se afle pe acelasi server cu pagina principala, altfel nu va fubnctiona din motive de securitate.

Trecand direct la subiect, pentru a prelua si modifica continutul dintr-un IFrame, se poate folosi proprietatea ""contentWindow, aceasta returneaza obiectul "window" al unui frame sau iframe specificat.
Iata un exemplu din care se poate intelege modul de aplicare al acestei proprietati.

1. Cream intai un fisier "ifr.htm" ce va contine codul HTML al paginii ce va fi afisata in IFrame.

Cod ifr.htm

<html>
<head><title>Pagina iframe</title></head>
<body>
Continut din IFrame.<br />
Continuare continut ...
</body>
</html>

2. Definim si pagina principala, de exemplu "main.html" (in acelasi director pe server), in care scriem codul penru includerea IRame-ului si scriptul JavaScript care va prelua si modifica continutul din IFrame.
- Explicatiile necesare le gasiti in codul script-ului.

Cod main.html

<html>
<head><title>Pagina principala</title></head>
<body>
<script type="text/javascript">
function get_iframe(ifr_id) {
    // Preia obiectul ce face referire la iframe, dupa id-ul acestuia
    var myIFrame = document.getElementById(ifr_id);

    // Se aplica proprietatea "contentWindow" la obiectul-ul iframe-ului
    // Astfel se preia fereastra acestuia si cu celelalte proprietati continutul din el
    var content = myIFrame.contentWindow.document.body.innerHTML;

alert("Content: \n" + content);                 // Afiseaza o fereastra Alert cu datele preluate

    // Se defineste un text HTML nou care va inlocui continutul din iframe
    content = '<font color="blue">Text adaugat prin JavaScript, din pagina principala</font>';

    // Se aplica modificarea continutului
    myIFrame.contentWindow.document.body.innerHTML = content;
}
</script>

<h3>Pagina principala</h3>
<a href="#" onclick="get_iframe('ifr')">Preia /Modifica IFrame</a><br><br>
<iframe src="ifr.htm" id="ifr" name="ifr"></iframe>
</body>
</html>

- Acest exemplu va afisa urmatorul rezultat:

Pagina Principala

Preia /Modifica IFrame

Continut din IFrame.
Continuare continut ...

- Cand dati click pe link-ul "Preia /Modifica IFrame", va fi apelata functia "get_iframe()", care preia si afiseaza intr-o fereastra Alert continutul din IFrame, apoi seteaza un alt continut si-l inlocueste. Daca darti cluck inca o data, i-l va prelua si afsa pe cel inlocuit.

O alta metoda ce ar putea fi folosita, in loc de "contentWindow", este proprietatea "parent" impreuna cu numele IFrame-ului. Cu aceasta pot fi preluate si valori de variabile JS aflate in IFrame si chiar apela functii JavaScript aflate in el.
Aceasta metoda este prezentata in tutorialul urmator, in care este aratat modul de preluare si modificare a continutului unui IFrame printr-un script JS ce se afla intr-un al doilea IFrame.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Preluare si modificare continut IFrame

Last accessed pages

  1. Laravel Middleware (385)
  2. Creare si editare pagini HTML (31407)
  3. Jokes - Glume, Bancuri, Humor (2) (3121)
  4. Numerale, Numere in limba engleza - Numerals (25190)
  5. Subtantive - Plural (2165)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1976)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1677)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1575)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1434)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1167)