0

I'm writing the back end for an image embedding service. We are thinking of supporting the embedding using an iframe, similar to YouTube.

Eg:

<iframe type="text/html" src="http://example.com/photos/embed/abc/" width="640px" height="480px" frameborder="1"> </iframe>

Using the above iframe anywhere should embed the image in the iframe (along with some extra stuff like title, etc). However, I would like to return an image that is the same size as the "width" and "height" specified in the iframe. I imagine the image resize should take place at the backend for this to work.

In that case, I would need the width and height of the iframe to be accessible at the backend. Is there any way to figure this out at the backend? For eg, are these made part of the HTTP request or anything of that sort?

PS: I'm using Django for the back end (if that helps)

3 Answers 3

2

In your example the page/script [http://example.com/photos/embed/abc/] can't get what the value of the width/height is. But you can pass width/height variables in the URL like

<iframe type="text/html" src="http://example.com/photos/embed/abc/?width=640&height=480" width="640px" height="480px" frameborder="1"> </iframe>

2
  • Thanks, yes, I had already thought about this approach. Only problem is that this could cause the image size and the iframe size to be out of sync if the user specifies different values in the URL and iframe properties. Any method to work around this? May 4, 2011 at 6:48
  • If you insist on using iframe then i am afraid that's the only way to communicate with the /abc/ page.
    – 0xAli
    May 4, 2011 at 7:05
0

No, the size of the iframe is not available at the back end.

As you are showing a page in the iframe and not the image directly, that page could use client script to get the size of the iframe, and send that information along in the URL in the image tag.

Something like:

window.onload = function(){
  var b = document.body;
  if (window.opera) b = b.parentNode;
  var img = document.createElement('img');
  img.src = 'http://example.com/photos/embed/abc/?w=' + b.clientWidth + '&h=' + b.clientHeight;
  img.alt = '';
  document.body.appendChild(img);
}

You might need this style in the page also, so that the body element takes up the full height of the iframe:

html,body { height: 100%; }
1
  • Thanks, this seems to be the best method of the lot. May 4, 2011 at 7:12
0

You could use javascript (demo is in jquery for cross-browser ease of implementation) to inspect the iframe element and copy its size attributes into the url requested by the iframe: the following will do what you need by delaying the url of the iframe being set until the width and height are determined.

<script type="text/javascript">

$(document).ready(function() {
  var frame = $('#myiframeid');
  var width = frame.attr('width');
  var height = frame.attr('height');
  var url = 'http://example.com/photos/embed/abc/?w=' + width + '&h=' + height;

  frame.attr('src', url);
});

</script>

<iframe id="myiframeid" type="text/html" src="myemptyblankpage.html" width="640px" height="480px" frameborder="1"> </iframe>

Hope that helps.

1
  • This is also an okay approach, but I feel this will be too much code for the user to embed. Giving the user just the "<iframe>" would be ideal. Thanks! May 4, 2011 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.