Descriere: Preluare si modificare continut dintr-un iFrame
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
În acest tutorial este prezentat modul de preluare şi modificare a conţinutului unui IFRAME, din pagina principală, folosind JavaScript.
Este important de menţionat că pagina care este inclusă în IFrame trebuie să se afle pe acelaşi server cu pagina principală, altfel nu va funcţiona din motive de securitate.
Trecând direct la subiect, pentru a prelua şi modifica conţinutul dintr-un IFrame, se poate folosi proprietatea contentWindow, aceasta returnează obiectul "window" al unui frame sau iframe specificat.
Iată un exemplu din care se poate înţelege modul de aplicare al acestei proprietăţi.
1. Creăm întâi un fişier "ifr.htm" ce va conţine codul HTML al paginii ce va fi afişată în IFrame.
Cod ifr.htm
Cod: Selectaţi tot
<html>
<head><title>Pagina iframe</title></head>
<body>
Continut din IFrame.<br />
Continuare continut ...
</body>
</html> - Explicaţiile necesare le găsiţi în codul script-ului.
Cod main.html
Cod: Selectaţi tot
<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>O altă metodă ce ar putea fi folosită, în loc de "contentWindow", este proprietatea "parent" împreună cu numele IFrame-ului. Cu aceasta pot fi preluate şi valori de variabile JS aflate în IFrame şi chiar apela funcţii JavaScript aflate în el.
Această metodă este prezentată în tutorialul următor, în care este arătat modul de preluare şi modificare a conţinutului unui IFrame printr-un script JS ce se află într-un al doilea IFrame.