window.onresize调用仅一次

Question

I am facing problem while resizing an image in the Popup brwoser window. 在Popup brwoser窗口中调整图像大小时遇到问题。

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: 我将shpath的imgpath从我的aspx文件传递到此html文件，如下所示：

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

The javascript PopupPic function is shown below: javascript PopupPic函数如下所示：

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. 据我所知，每次调整窗口大小时，都在重写img标签。 What you should be doing is changing the width and height attributes of the tag. 您应该做的是更改标签的width和height属性。

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. 没有PopupEventImage.htm文件。 Instead, make that an ASP.NET file that takes a value from something the user cannot edit. 而是使ASP.NET文件从用户无法编辑的内容中获取值。 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): 我将对您的页面进行一些更改（尤其是避免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>

With the closure I am creating in init , you don't even have to give your img a unique ID. 通过我在init创建的闭包，您甚至不必为img提供唯一的ID。

window.onresize调用仅一次

问题描述

2 个解决方案

解决方案1
1 已采纳 2010-09-15 15:46:33

解决方案2
0 2010-09-15 15:53:38

window.onresize调用仅一次

问题描述

2 个解决方案

解决方案1 1 已采纳 2010-09-15 15:46:33

解决方案2 0 2010-09-15 15:53:38

解决方案1
1 已采纳 2010-09-15 15:46:33

解决方案2
0 2010-09-15 15:53:38