Osveževanje velikosti iframe-a na različnih domenah

Ko potrebuješ prilagajanje velikosti iframe komponente, ki prikazuje vsebino z druge domene, lahko nastane problem, saj so pred kratkim zadevo zaradi varnostnih razlogov malo bolj zaprli, tako da iz parent-a ne moreš kar tako dostopati do vsebine iframe-a.

Na tem linku, so izumili (meni) edini uporaben trik, ki je po implementaciji resnično deloval.

Kakšen je trik?

Na spletni strani, ki bo prikazana v iframe-u, je potrebno vstaviti t.i. "blank" iframe, ki služi samo "nategovanju", saj ima za prikazan URL vnešeno povezavo na "empty" spletno stran domene, ki prikazuje iframe. Taista spletna stran pa je namenjena "samo" temu, da sparsa URL, v katerem pa se nahaja tudi podatek o "novi" velikosti iframe-a, ki je trenutno aktualna in kliče funkcijo, ki poskrbi za resizing iframe-a.

Se sliši komplicirano? Pa ni tako, ko stvari vidiš na primeru, kot je bil moj.

Del skripte, ki prikazuje vsebino v iframe-u (v mojem primeru, je bilo potrebno prikazati aplikacijo AKROmat, ki že obstaja na URL-ju):

HTML:
  1. <iframe id="akromat_iframe" frameborder="0" src="http://www.akron.si/cgi-bin/oni/vnos4.asp" style="margin:0px; width:618px; overflow-y:hidden;"></iframe>
  2.  
  3. <script type="text/javascript">
  4.     function setFrameHeight(height) {
  5.         var theFrame = document.getElementById('akromat_iframe');
  6.         theFrame.height = height;
  7.     }
  8. </script>

Na tej isti domeni pa mora obstajati še zgoraj omenjena "empty" spletna stran, ki poskrbi za osveževanje (resizer.html):

HTML:
  1.     <head>
  2.         <meta http-equiv="cache-control" content="public">
  3.         <script type="text/javascript">
  4.             function reload() {
  5.                 top.window.location = top.window.location;
  6.             }
  7.            
  8.             function callback(params) {
  9.                 var url = decodeURI(getQuerystring('url'));
  10.                 var iframe = document.createElement("iframe");
  11.                 iframe.src = url + '?' + params;
  12.                 document.getElementById('xDomainScriptContainer').appendChild(iframe);
  13.             }
  14.            
  15.             function getQuerystring(ji) {
  16.                 hu = window.location.search.substring(1);
  17.                 gy = hu.split("&");
  18.                 for (i=0;i<gy.length;i++) {
  19.                     ft = gy[i].split("=");
  20.                     if (ft[0] == ji) {
  21.                         return ft[1];
  22.                     }
  23.                 }
  24.             }
  25.            
  26.             function run() {
  27.                 var cmd = getQuerystring('cmd');
  28.            
  29.                 if ( cmd == 'reload' ) {
  30.                     top.window.location = top.window.location;
  31.                 }
  32.                 else if ( cmd == 'offset' ) {
  33.                     var offsetHeight = top.window.pageYOffset || top.document.documentElement.scrollTop || top.document.body.scrollTop;
  34.                     var id = getQuerystring('id');
  35.                     callback('cmd=offset&h=' + offsetHeight + '&id=' + id);
  36.                 }
  37.                 else if ( cmd == 'resize' ) {
  38.                     var h = getQuerystring('h');
  39.                     top.setFrameHeight(h);
  40.                 }
  41.             }
  42.         </script>
  43.     </head>
  44.     <body onload="run()">
  45.         <div id="xDomainScriptContainer"></div>
  46.     </body>
  47. </html>

Na strani aplikacije, ki jo prikazujemo pa je potrebno poskrbeti za "blank" iframe, ki v bistvu skrbi za prenos podatkov (informacij) - iframefix.js:

JAVASCRIPT:
  1. function runXDomainScript(params) {
  2.     var iframe = document.createElement("iframe");
  3.     iframe.src = 'http://www.paketnik.si/demo/akron.si/assets/extra_scripts/iframe_resizer/resizer.html?' + params;
  4.     document.getElementById('xDomainScriptContainer').appendChild(iframe);
  5.     setTimeout("document.getElementById('xDomainScriptContainer').innerHTML = ''", 2000);
  6. }
  7. function getBodyHeight() {
  8.     var height;
  9.     if (document.body) {
  10.         if ((document.body.offsetHeight) &&
  11.             (navigator.appName.indexOf("Microsoft") == -1) &&
  12.             (navigator.userAgent.toLowerCase().indexOf('chrome') == -1) ) { // for others (Firefox)
  13.             height = document.body.offsetHeight;
  14.         } else if (document.body.scrollHeight) { // for IE and Chrome support
  15.             height = document.body.scrollHeight + 5;
  16.         }
  17.     } else if (document.height) {
  18.         height = document.height;
  19.     }
  20.     return height;
  21. }
  22. function setHeight() {
  23.     height = getBodyHeight();
  24.     runXDomainScript('cmd=resize&h=' + height);
  25. }
  26. function addDivToBody() {
  27.     var _div = document.createElement("div");
  28.     _div.id = 'xDomainScriptContainer';
  29.     _div.style.display = 'none';
  30.     var _body = document.getElementsByTagName('body')[0];
  31.     _body.appendChild(_div);
  32. }
  33. window.onload = function(e) {
  34.     addDivToBody();
  35.     setHeight();
  36. }

To skripto je potrebno imeti vključeno na vseh pogledih, to storiš tako, da spodnjo kodo vključiš v header!

HTML:
  1. <script type="text/javascript" src="iframefix.js"></script>

Še nekaj povezav:
http://johan.driessen.se/posts/resizing-cross-domain-iframes
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx
http://css-tricks.com/5210-cross-domain-iframe-resizing/
http://www.w3.org/TR/2009/WD-html5-20090212/comms.html#crossDocumentMessages
http://stackoverflow.com/questions/5908676/yet-another-cross-domain-iframe-resize-question
http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content
http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/

Podobni članki:

  1. Raztezanje flash ozadja glede na resolucijo okna brskalnika
  2. Razčlenjevanje (parsanje) vsebine iz Avto.net iFrame-a
  3. CSS3 gumb (brez Photoshop-a)
  4. Dinamično nalaganje slik z jQuerijem
  5. Google Chrome ssl secure warning
  6. Avtosnoj.si – parsanje spletnih oglasov iz spletnega portala avto.net

Dodaj komentar