lescinskas.lt http://www.lescinskas.lt/lt/blog lt Komunikacija su Iframe per Javascript bei JQuery 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.

]]> Thu, 22 Oct 2009 17:01:34 +0300 http://www.lescinskas.lt/lt/blog/entry/paulius/komunikacija-su-iframe-per-javascript-ir-jquery Iliustracijų korekcija RSS agregatoriuose Flying monkeys stole my icon

Neretai pasitaiko, jog tinklaraščių įrašuose kelias iki iliustracijų yra pateikiamas reliatyviai (pvz.: <img src="/images/foo.bar" />). Analogiškas HTML kodas bus pateikiamas ir to tinklaraščio RSS šaltinyje, todėl RSS skaitymo programose arba agregatoriuose tokia iliustracija daugeliu atveju nebus atvaizduota (nes bus ieškoma ne tinklaraščio, o agregatoriaus serveryje).

Šiai situacijai yra du sprendimo būdai: iliutracijų korekcija RSS šaltinyje arba RSS skaitymo programoje ar agregatoriuje (daugelis jų atlieka šį veiksmą).

Pateikiu PHP kodą, kuris tinka abiejais atvejais. Jis HTML kode esantiems paveikslėliams preprend'ina HTTP host'ą:

<?php
// Tekstas, kurį reikia išparsinti:
$blogEntry = 'Kažkoks blogo įrašo tekstas<b>
<img src="http://www.cards.lt/img/cards_logo_small.jpg"
alt="Logo" /></b>
<img alt="Logo"
src="/img/cards-125x125.jpg" width="125" height="125" />';

// RSS'o URL, iš kurio parsinam įrašus (-ą)
$blogUrl = 'http://www.lescinskas.lt/index.php/lt/blog/rss';

$parsedUrl = parse_url($blogUrl);

// Išparsintas įrašas:
$parsedEntry = preg_replace('/(<\s*img [^\>]*src\s*=\s*[\""\']?)(\/[^\""\'\s>]*)/i', '\\1'.$parsedUrl['scheme'].'://'.$parsedUrl['host'].'\\2', $blogEntry);

echo $parsedEntry;
?>

 

]]> Tue, 12 Aug 2008 10:23:07 +0300 http://www.lescinskas.lt/lt/blog/entry/paulius/iliustraciju-korekcija-rss-agregatoriuose