Control contents of iframe
Hi!
I'll try not to go into too much detail, but basically I need some code to make the contents (specifically images) of an iframe expand by 10 pixels when the iframe is loaded.
The code I have below will expand all the images on my main HTML page, but not the images included in the iframe.
Would somebody please let me know what I need to do to get the images in the iframe to expand by 10 pixels too? Thanks in advance.
The iframe is being pulled in from another domain. Is there some type of xss thing preventing me from doing this, or just my code?
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<script type='text/javascript' src='jquery-1.2.6.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var selector = 'img';
jQuery(selector).each(function()
{
var width = jQuery(this).width();
var height = jQuery(this).height();
//Set variables for manipulation
var ratio = (height / width );
// Default stretch
var new_width = width + 10;
//Do the math - keep proportions
var new_height = (new_width * ratio);
});
});
</script>
</head>
<body>
<iframe frameborder="0" border=0 width="1000" height="800" id="embedsite"
src="dpanel.php" name=iframe scrolling=yes
style="position:absolute;" allowtransparency="true"></iframe>
</body>
</html>