window.onresize只调用一次

我在调整Popup brwoser窗口中的图像大小时遇到问题。window.onresize只调用一次

当用户第一次调整浏览器窗口大小时，弹出窗口中的图像会被调整大小，之后当窗口调整大小时（dblclicking标题栏或使用调整大小手柄）图像维度保持与最后调整大小的维度相等。

我的代码如下所示：

<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>

我传递imgpath从我的aspx文件这个HTML文件，如下shjown：

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

JavaScript的PopupPic功能显示如下：

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

每次用户调整弹出窗口大小时，都可以调整图像的大小？

来源

2010-09-15 Rahat Ali

从我所看到的情况来看，每次调整窗口大小时，都会重写img标记。你应该做的是改变标签的宽度和高度属性。

此外，它看起来像您的代码已成熟的跨站点脚本攻击。

的代码，将工作，但保留跨站点脚本问题的例子：

 
<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>

我建议一般的替代方法。没有PopupEventImage.htm文件。相反，使这个ASP.NET文件从用户无法编辑的东西中获取一个值。例如会话状态。这样，恶意用户就无法将脚本攻击注入到您的页面中。如果您愿意，我可以提供一个例子。

来源

2010-09-15 15:46:33

感谢您的帮助，我遵循了您的建议，并且运作正常。我很高兴看到你正在谈论的例子，即ASP.NEt文件。请保持minf，我传递一个数据网格的图像从一个asp.net页面，datagrid包含所有的记录，用户点击任何一个查看其放大的图像。 – 2010-09-16 07:26:37

一些变化我会做你的网页（尤其是避免document.write话费）：

<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>

随着closure我创造的init，你甚至不用给你img一个唯一的ID 。

来源

2010-09-15 15:53:38 palswim

Thankx为您提供帮助 – 2010-09-16 07:25:20

window.onresize只调用一次

回答

相关问题