JavaScript only works when page is reloaded_问答_开发者

JavaScript only works when page is reloaded

开发者 https://www.devze.com 2022-12-15 14:42 出处：网络

I have a fairly simple page that displays an image in a pop-up window.The onLoad event simply takes the querystring, populates an image tag with that value, then resizes the image and window to match.

I have a fairly simple page that displays an image in a pop-up window. The onLoad event simply takes the querystring, populates an image tag with that value, then resizes the image and window to match.

For some reason, this only works for me when the page is reloaded/refreshed. Or, once the image has been displayed once, it will work from then on, even though caching is turned off. But any time an image is viewed the first time, the page comes up blank with no errors thrown.

Any suggestions?

Thanks

<!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>
    <title>Image Zoom</title>
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript">
        function getImage() {
            //get the query string (everything after the ?)
            var filename = window.location.search.substring(1);
            //find the image control
            var imageWorking = document.getElementById('dynamicImage');
            //assign the image source
            imageWorking.src = '../Images/' + filename;
            //create an image variable
            var newImg = new Image();
            //assign the source to match the page image
            newImg.src = imageWorking.src;
            //get the width and height
            var width = newImg.width;
            var height = newImg.height;
            //set the page image width and height to match the disk image
            imageWorking.width = width;
            imageWorking.height = height;
            //set the window to be just larger than the image
            window.resizeTo(width + 50,height + 50);
    开发者_JAVA百科    }
    </script>
</head>
<body onload="getImage();">
    <img src="images/spacer.gif" id="dynamicImage" alt="Image Zoom" width="1" height="1" />
</body>
</html>

The page is called using the following function:

function imageZoom(imageName)
{
    window.open('ImageZoom.htm?' + imageName + '','imageZoom','width=400,height=400,menubar=no,toobar=no,scrollbars=yes,resizable=yes');
}

Write the IMG tag dynamically using JavaScript during page load, and resize the window at onload:

<!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>
  <title>Image Zoom</title>
  <meta http-equiv="Pragma" content="no-cache" />
  <script type="text/javascript">
    function sizeWindow() {

      //find the image control
      var img = document.getElementById('dynamicImage');

      //set the window to be just larger than the image
      window.resizeTo(img.width + 50, img.height + 50);
    }
  </script>
</head>
<body onload="sizeWindow();">
  <script type="text/javascript">
    var filename = window.location.search.substring(1);
    document.write("<img src='../Images/" + filename + "' id='dynamicImage' alt='Image Zoom' />");
  </script>
</body>
</html>

You need to set the SRC of the <img> to something initially. If you don't desire to display anything, just use a 1x1 pixel transparent GIF.

have you tried bind the getImage function to the window's onload event rather then to the body's onload?