代码之家 › 专栏 › 技术社区 › Sheikh Rahat Ali

window.onResize调用仅一次

javascript

Sheikh Rahat Ali · 技术社区 · 15 年前

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

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

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

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

2 回复 | 直到 15 年前

Aaron D 15 年前

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文件,该文件从用户无法编辑的内容中获取值。例如,会话状态。这样,恶意用户就无法向您的页面注入脚本攻击。如果你愿意,我可以提供一个例子。

palswim 15 年前

我将对您的页面进行一些更改(尤其是为了避免 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 unique ID.