Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Auto resize IFRAME?

Status
Not open for further replies.
youradds

youradds

Programmer
Joined
Jun 27, 2001
Messages
817
Location
GB
Hi,

I'm trying to re-size an IFRAME (based on the height of the content), using this code:

Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 32</title>
<script>
function resizeIframe(iframeID) {
	if(self==parent) return false;
	else if (document.getElementById&&document.all)
	var FramePageHeight = framePage.scrollHeight + 10;

	parent.document.getElementById(iframeID).style.height=FramePageHeight;
} 
window.onload=resizeIframe('test_iframe');
</script>

</head>

<body>

<iframe name="test_iframe" src="[URL unfurl="true"]http://gossamerlinks.com/cgi-bin/dev/get_code.cgi?action=show;ID=3;type=tower;rating=1;popularity=1;recent_reviews;recent_reviews=1;write_a_review=1"></iframe>[/URL]

</body>

</html>

..but it doesn't work. Any ideas what I'm doing wrong?

TIA!

Andy
 
Sort by date Sort by votes
Is this code running on the same server as the ifrmae contents?

In other words: Is the code running also on gossamerlinks.com?

If you're trying to do this from different servers it will not work.

As by design for security purposes javascript has no access to the properties of an object from another server. So basically your height value is always null.


There have been many discussions about this before, and the only reliable solution thus far is to have a piece of javascript run inside the frame and return the height value to the parent page. Of course this assumes you have access to the content from the iframe and can embed the code in it.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I've been researching this all afternoon, and I'm starting to wonder if its even possible to get the IFRAME size from an external URL?

I tried an AJAX one (but that gives the "permission denied" error obivously, due to it being on an external domain :/)

Anyone?
 
Upvote 0 Downvote
Hi,

Nah, its on another domain :/

I don't understand how . Here is some example code of them doing it:

Code: 
<div id="TA_rated888" class="TA_rated">

<ul id="tIE8ho" class="TA_links QLSAP0">

            <li id="xX9kD6JA" class="ldLW1v"><a href=[URL unfurl="true"]http://www.tripadvisor.com/Hotel_Review-g1384365-d1491184-Reviews-La_Maison_du_Chapelier-Cazilhac_Aude_Languedoc_Roussillon.html>La[/URL] Maison du Chapelier</a></li>

      </ul>

  </div>

<script src="[URL unfurl="true"]http://www.jscache.com/wejs?wtype=rated&uniq=888&locationId=1491184&lang=US"></script>[/URL]

Anyone got any ideas?

TIA!

Andy
 
Upvote 0 Downvote
I see no iframe in that code
Just a script call.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Yeah, just having a look at it - to see how they do it :)

Looks like what they do, is update the <div, with the content that needs to be shown - quite clever- now, all I need to do is try and replicate it :p

Cheers

Andy
 
Upvote 0 Downvote
Cool, got it working.

Basically, on the 3rd party site, they use something like:

Code: 
<script src="[URL unfurl="true"]http://gossamerlinks.com/cgi-bin/dev/get_code.cgi?action=show;ID=3"></script>[/URL]
<script>
  show_badge();
</script>

...and then that .cgi script gets the values, and passes it back as a function, ready to be called (and displayed)

Seems to work well :)

Cheers

Andy
 
Upvote 0 Downvote
Looks like they are writing out more JS onto the calling page that does all the work directly.

Code: 
if (window.taValidate == undefined) {
   window.taOnLoad   = window.onload;
   window.taValList  = Array();
   window.taValIndex = 0;
   window.taValidate = function () {
      if (window.taOnLoad != null) {
         try {
         window.taOnLoad();
         } catch (err) { }
      }
      for (ii = 0; ii < window.taValIndex; ii=ii+1) {
         fname = window.taValList[ii]
         fname();
      }
   }
   window.taAddValidator = function (fname) {
      window.taValList[window.taValIndex] = fname;
      window.taValIndex                   = window.taValIndex + 1;
      }
   window.onload = window.taValidate
}
window.taAddValidator (injectrated9767)

                  if(document.createStyleSheet) {
        document.createStyleSheet("[URL unfurl="true"]http://cdn.tripadvisor.com/css2/widget/cdswidFRR-v1972764538a.css");[/URL]
      } else {
        var stylesImport = "@import url(' [URL unfurl="true"]http://cdn.tripadvisor.com/css2/widget/cdswidFRR-v1972764538a.css[/URL] ');";
        var newSS=document.createElement('link');
        newSS.rel='stylesheet';
        newSS.href='data:text/css,'+escape(stylesImport);
        if (document.getElementsByTagName("head")[0]) {
            document.getElementsByTagName("head")[0].appendChild(newSS);
        } else {             document.write('<link rel="stylesheet" href="data:text/css,' + escape(stylesImport) + '"/>');
        }
      }
        
      var newJs = document.createElement('script');
    newJs.setAttribute('type', 'text/javascript');
    newJs.setAttribute('src', '[URL unfurl="true"]http://cdn.tripadvisor.com/js2/widget/CdsWidgets-v4258900417a.js');[/URL]
    document.getElementsByTagName("head")[0].appendChild(newJs);
  
function injectrated9767() {
    var container = document.getElementById('TA_rated888');
  if (container == null) {
        var scriptTags = document.getElementsByTagName("script");
    for (var i=0; i<scriptTags.length; i++)
    {
      if (scriptTags[i] != null && scriptTags[i].src != null &&
          scriptTags[i].src.indexOf("rated?uniq=888") >= 0)
      {
        var msgElem = document.createElement('div');
        if (msgElem != null && msgElem != 'undefined')
        {
          msgElem.style.margin='8px';
          msgElem.style.color='red';
          msgElem.innerHTML="Please check the TripAdvisor code and install again.";
          var parentElem = scriptTags[i].parentNode;
          if (parentElem != null && parentElem != 'undefined')
          {
            parentElem.appendChild(msgElem);
          }
          break;
        }
      }
    }
    return;
  }

    var validityRegEx = new RegExp('https?://([^/]+\.|)tripadvisor\.(com|co\.uk|fr|it|es|de|ie|in|jp|se|ca|com\.br)/.*');
  var taServerName = 'tripadvisor';
   var valid = true;
  var linksNum = 0;
      var links = container.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
    var taLink = links[i];
    var taLinkStr = taLink.href;
    if (taLinkStr.indexOf(taServerName) != -1) {
      linksNum = linksNum + 1;
      if (typeof(taLink.rel) != 'undefined' && taLink.rel == 'nofollow') {
        valid = false;
        continue;
      }
            if (!taLinkStr.match(validityRegEx)) {
        valid = false;
        continue;
      }
    }
  }
  if (linksNum == 0) {
    valid = false;
  }
  if (!valid) {
    var tmpStr = '<dl><dt>' + "Please check the TripAdvisor code and install again." + '</dt></dl>';
    container.innerHTML = tmpStr;
  } else {
    container.innerHTML = '<div id="CDSWIDFRR" class="widFRR"> '+
'<img class="widFRRIMG" id="CDSWIDFRRIMG" src="[URL unfurl="true"]http://www.tripadvisor.com/img/cdsi/img2/badges/rated_en-11424-2.gif"[/URL] alt="La Maison du Chapelier, Cazilhac (Aude), Languedoc-Roussillon"/> '+
'<var class="widFRRCopy"><a target="_blank" href="[URL unfurl="true"]http://www.tripadvisor.com/Hotel_Review-g1384365-d1491184-Reviews-La_Maison_du_Chapelier-Cazilhac_Aude_Languedoc_Roussillon.html">La[/URL] Maison du Chapelier</a></var><!--/ cdsRRFCopy--> '+
'</div><!--/ cdsFRRBadge--> '+
'';
  }  
}

Its a little confusing, but it looks like they are creating the html on the fly, with their widget.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Yeah, exactlty. I tried doing it with innerHTML, but kept gettig an error - so I'm just using document.write() now, to print out the HTML on the fly (using a .cgi script to generate all the variables we wanna show on the widget)

Cheers

Andy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

emmals
  • Locked
  • Question Question
Auto Click Button and pass through all data
Replies
0
Views
282
emmals
emmals
damipera
  • Locked
  • Question Question
Autobrowse in Javascript?
Replies
8
Views
590
Offera
Offera
Krus1972
  • Locked
  • Question Question
Geolocate and Form Auto-Submit
Replies
2
Views
323
vacunita
vacunita
noodles57
  • Locked
  • Question Question
reset select box from within an iframe?
Replies
1
Views
275
ChrisHirst
ChrisHirst
Enkrypted
  • Locked
  • Question Question
Auto refresh iFrame
Replies
2
Views
462
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top