Žymės įrašai

Spalis22

Komunikacija su Iframe per Javascript bei JQuery (Komentarai 66)

Žymės: html,javascript,jquery

Pasidalink!

Iframe - HTML elementas, leidžiantis tam tikroje tinklalapio vietoje įkelti kito tinklalapio turinį.

Nors HTML5 buvo atsisakyta tradicinių rėmelių (frameset), tačiau Iframe yra plačiai naudojamas ir, panašu, kad ateityje šio elemento naudojimas bus dar intensyvesnis, žinant, jog tiek socialinių tinklų aplikacijų platformų (pvz.: OpenSocial), tiek ir įvairūs Interneto servisai (pvz.: Google Maps) veikimas pagrįstas Iframe pagrindu.

Komunikacija tarp pagrindinio tinklalapio ir Iframe'o Javascript pagalba galima tik tuo atveju, jei abu puslapiai yra užkraunami iš to paties domeno (pvz.: http://www.foo.com ir http://www.bar.com bus negalima). Netgi norint realizuoti komunikaciją tarp skirtingų 3 lygio domenų (pvz.: http://foo.example.com ir http://bar.example.com), būtina abiejuose puslapiuose nurodyti, kad šie abu tinklalapiai priklauso tam pačiam domenui. Tai galima padaryti Javascript komanda:

document.domain = 'example.com';

Norint realizuoti komunikaciją tarp skirtingų domenų, reiktų naudoti Iframe proxy. T.y. skriptas, esantis tame pačiame domene, turėtų tiesiog atvaizduoti kitame domene esančio puslapio HTML turinį.

Komunikaciją tarp pagrindinio puslapio ir į jį įterpto Iframe'o atspindi šie pavyzdžiai.

Pagrindinis puslapis (pvz.: index.html)

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
</script>
</head>
<body>
<iframe id="myIframe" src="iframe.html" width="100" height="100" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<div id="foo">FOO</div>
<script type="text/javascript">
    // Naudojant skirtingus subdomenus, nurodome bendrą domeną:
    document.domain = 'example.com';
   
    $('#myIframe').load(function()
    {
        // jQuery pavyzdys:
        var frame = $('#myIframe').contents();
        console.log('jQuery: ',frame.find('#bar').html());
       
        // Javascript pavyzdys:
        frame = document.getElementById('myIframe').contentDocument;
        // Jei neveikia contentDocument, galima naudoti contentWindow.document
        console.log('JS: ', frame.getElementById('bar').innerHTML);
    });
</script>
</body>
</html>

Iframe puslapis (iframe.html)

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
</script>
</head>
<body>
<div id="bar">BAR</div>
<script type="text/javascript">
    // Naudojant skirtingus subdomenus, nurodome bendrą domeną:
    document.domain = 'example.com';
   
    // jQuery pavyzdys - ieškome #foo elemento window.parent.document kontekste
    console.log('jQuery: ', $('#foo', window.parent.document).html());
    // Javascript pavyzdys:
    console.log('JS: ', window.parent.document.getElementById('foo').innerHTML);
</script>
</body>
</html>

Šie pavyzdžiai Firebug konsolėje parodys atitnkamų elementų turinius.

« 1 »

Žymės RSS Žymės RSS