In acest tutorial este prezentat modul de preluarea si modificare a continutului unui IFRAME, preluarea valorii unei variabile din el si apelarea unei functii JS aflata in el, toate printr-un buton si script JavaScript aflate intr-un al doilea IFrame.
Este important de mentionat ca paginile care sunt incluse in cele doua IFrame-uri 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 unui IFrame printtr-un alt IFrame, se foloseste baza comuna pe care acestea o au, si anume Pagina Principala, sau denumita si "Parinte", utilizand proprietatea "parent" impreuna cu numele IFrame-ului ce va fi cercetat (nume ce e specificat in atributul "name").
Iata un exemplu din care se poate intelege modul de aplicare al acestei proprietati (explicatiile necesare le gasiti in cod).

1. Cream intai un fisier "ifr1.htm" ce va contine codul HTML pt. pagina din primul IFrame.

Cod ifr1.htm

<html>
<head>
<script type="text/javascript"><!--
// Stocheaza o valoare in variabila "var_ifr1", care va fi preluat de alta variabila din iframe-ul 2
var var_ifr1 = '<b>Val. variabila din iframe 1</b>';

// Functia modifica continutul DIV-ului "div_ifr1" cu ce primeste la parametru
// Va fi apelata din iframeul 2
function f_ifr1(txt) {
    document.getElementById('div_ifr1').innerHTML = txt;
}
//--></script>
</head>
<body>
IFRAME 1
Continut in BODY
<div id="div_ifr1">Continut div din iframe 1</div>
</body>
</html>

2. Acum se creaza pagina "ifr2.htm", pt. al doilea IFrame, care printr-o functie apelata dintr-un buton va prelua continutul si valoarea unei variabile din primul IFrame.

Cod ifr2.htm

<html>
<head></head>
<body>
IFRAME 2<br>

<script type="text/javascript"><!--
function f_ifr2(txt) {
    // Preia tot continutul BODY din iframe-ul "ifr1"
    var c_ifr1 = parent.ifr1.document.body.innerHTML;

    alert(c_ifr1);                 // Il afiseaza intr-o fereastra alert

    // Preia valoarea variabilei "var_ifr1", aflata in scriptul din iframe-ul "ifr1"
    var from_ifr1 = parent.ifr1.var_ifr1;

    // Afiseaza in DIV-ul "d_ifr2", din propriul cadru, valoarea preluata
    document.getElementById('d_ifr2').innerHTML = from_ifr1;

    // Apeleaza functia "f_ifr1", din primul iframe, transferandu-i si un parametru
    parent.ifr1.f_ifr1(txt);
}
//--></script>
<div id="d_ifr2"> </div>
<button onclick="f_ifr2('<b>Text modificat din iframe 2</b>')">Action iframe</button>
</body>
</html>

3. Ultimul pas este crearea paginii parinte, "main.html", ce va contine si afisa cele doua IFrame-uri.

Cod main.html

<html>
<head><title>Pagina principala</title></head>
<body>
<h3>Pagina principala</h3>
<h4>Primul iframe</h4>
<iframe src="ifr1.htm" id="ifr1" name="ifr1"></iframe>

<br><h4>Al doilea iframe</h4>
<iframe src="ifr2.htm" id="ifr2" name="ifr2"></iframe>
</body>
</html>

- Acest exemplu va afisa urmatorul rezultat:

Pagina Principala

Primul iframe

IFRAME 1 Continut in BODY
Continut div din iframe 1

Al doilea iframe

IFRAME 2

- Cand dati click pe butonul "Action iframe", din cadrul IFrame-ului 2, este apelata functia "f_ifr2()". Aceasta preia si afiseaza intr-o fereastra Alert tot continutul din IFrame-ul 1, apoi preia si valoarea variabilei din acesta, "var_ifr1", pe care o va afisa in propriu cadru, apoi apeleaza si functia "f_ifr1()", situata tot in primul IFrame, careia ii transmite prin parametru un text ce va inlocui continutul div-ului "div_ifr1".
- Toate aceste aactiuni vor fi efectuate din al doilea IFrame asupra codului din primul IFrame, prin intermediul proprietatii "parent".

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 din alt IFrame

Last accessed pages

  1. Trecut nedefinit 5 (72)
  2. Trecut nedefinit 4 (76)
  3. Trecutul nedefinit 3 (87)
  4. Trecut nedefinit 2 (92)
  5. Trecut nedefinit (128)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1988)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1687)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1590)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1449)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1172)