Question

我在Popup brwoser窗口中调整图像大小时遇到问题。

当用户第一次调整浏览器窗口大小时，弹出窗口中的图像会调整大小，之后当窗口调整大小时（dblclicking标题栏或使用调整大小手柄），图像尺寸将保持等于上次调整大小的尺寸。< / p>

我的代码如下所示：

<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文件，如下所示：

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");
}

每次用户调整弹出窗口大小时，是否有任何调整图像大小的想法？

Answer 1

从我所看到的情况来看，每次调整窗口大小时，都会重写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文件，从用户无法编辑的内容中获取值。例如，会话状态。这样，恶意用户就无法将脚本攻击注入您的页面。如果您愿意，我可以提供一个例子。

Answer 2

我会对您的网页进行一些更改（尤其是为了避免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>

使用init创建的closure，您甚至无需为img提供唯一ID。

window.onresize只调用一次

2 个答案: