window.onresize call only once

Question

I am facing problem while resizing an image in the Popup brwoser window.

Image present in popup gets resized when the user resizes the browser window for the first time only, afterwards when the window resizes (dblclicking the titlebar, or using the resize handles) the image dimension remains equal to the last resized dimension.

My code is shown below:

<html>
<head>
    <title>Enlarged Image</title>
    <script language="javascript" type="text/javascript">
       var arrTemp=self.location.href.split("?");
       var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
       var NS = (navigator.appName == "Netscape") ? true : false;

       function GetWidth() {
           var x = 0;
           if (self.innerHeight) {
               x = self.innerWidth;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               x = document.documentElement.clientWidth;
           }
           else if (document.body) {
               x = document.body.clientWidth;
           }
           return x;
       }

       function GetHeight() {
           var y = 0;
           if (self.innerHeight) {
               y = self.innerHeight;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
           }
           else if (document.body) {
               y = document.body.clientHeight;
           }
           return y;
       }

       window.onresize = function() { document.write("<img src='" + picUrl + "' border=0 Name=image Width=" + GetWidth() + " Height=" + (GetWidth() * 3) / 4 + "/>") }           

    </script>
</head>
<body style='margin: 0px; text-align:center;'>
    <script language="javascript" type="text/javascript">
        document.write("<img src='" + picUrl + "' border=0 Name=image Width=800 Height=600 />");            
    </script>
</body>

I am passing imgpath to this html file from my aspx file as shjown below:

this.aspHyperlink.NavigateUrl = "javascript:PopupPic('." + this.aspImgCtrl.ImageUrl.Replace('~', '.') + "')";

The javascript PopupPic function is shown below:

function PopupPic(sPicURL) {
    window.open("PopupEventImage.htm?" + sPicURL, "", "resizable=1,HEIGHT=600,WIDTH=800");
}

Any ideas for resizing the image every time the user resizes the popup window?

Answer 1

From what I can see, every time you resize the window, you are rewriting the img tag. What you should be doing is changing the width and height attributes of the tag.

Also, it looks like your code is ripe for cross-site scripting attacks.

An example of code that would work but keep the cross-site scripting problem:

<html>
<head>
    <title>Enlarged Image</title>
    <script language="javascript" type="text/javascript">
       var picUrl = "http://www.google.com/images/logos/ps_logo2.png&quot;;
       function GetWidth() {
           var x = 0;
           if (self.innerHeight) {
               x = self.innerWidth;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               x = document.documentElement.clientWidth;
           }
           else if (document.body) {
               x = document.body.clientWidth;
           }
           return x;
       }
       function GetHeight() {
           var y = 0;
           if (self.innerHeight) {
               y = self.innerHeight;
           }
           else if (document.documentElement && document.documentElement.clientHeight) {
               y = document.documentElement.clientHeight;
           }
           else if (document.body) {
               y = document.body.clientHeight;
           }
           return y;
       }
       function Resize() {
           var img = document.getElementById("mainImage"); 
           img.src = picUrl; 
           img.width = GetWidth();
           img.height = (GetWidth() * 3) / 4;
       }
       window.onresize = Resize;
       // Call Resize onload to get the initial sizing correct
       window.onload = Resize;
       </script>
</head>
<body style='margin: 0px; text-align:center;'>
    <img border=0 id=mainImage Width=800 Height=600 />
</body>

I would suggest an alternate approach in general. Don't have a PopupEventImage.htm file. Instead, make that an ASP.NET file that takes a value from something the user cannot edit. Session state for example. That way, malicious users cannot inject scripting attacks into your page. I can provide an example of this if you'd like.

Answer 2

Some changes I would make to your page (especially to avoid the document.write calls):

<html>
<head>
<title>Enlarged Image</title>
<script type="text/javascript">

var arrTemp = self.location.href.split("?");
var picUrl = (arrTemp.length > 0) ? arrTemp[0] : "";

function GetWidth() {
    if (self.innerHeight)
        return self.innerWidth;
    else if (document.documentElement && document.documentElement.clientHeight)
        return document.documentElement.clientWidth;
    else if (document.body)
        return document.body.clientWidth;
    return 0;
}
function GetHeight() {
    if (self.innerHeight)
        return self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight)
        y = document.documentElement.clientHeight;
    else if (document.body)
        y = document.body.clientHeight;
    return 0;
}

function init() {
    var img = document.createElement("img");
    img.src = picUrl;
    img.border = 0;
    img.style.width = "800px";
    img.style.height = "600px";
    document.body.appendChild(img);
    window.addEventListener( "resize", function(){ img.style.width = GetWidth() + "px"; img.style.height = ((GetWidth() * 3) / 4) + "px"; }, false );
}

window.addEventListener( "load", init, false );

</script>
</head>
<body style='margin: 0px; text-align:center;'>
</body>
</html>

With the closure I am creating in init, you don't even have to give your img a unique ID.