window.onresize call only once

У меня возникает проблема при изменении размера изображения в окне всплывающих окон.window.onresize call only once

Изображение, отображаемое во всплывающем окне, изменяется, когда пользователь меняет размер окна браузера только в первый раз, а затем, когда изменяется размер окна (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 в этот HTML файл из моего файла ASPX, как 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, что я передаю изображение из datagrid с страницы asp.net, где datagrid содержит всю запись, и пользователь нажимает на кого-нибудь, чтобы увидеть увеличенное изображение. –

Некоторые изменения, которые я сделал бы на вашу страницу (особенно, чтобы избежать 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 уникальный идентификатор ,

источник

2010-09-15 15:53:38 palswim

Thankx за вашу помощь –

window.onresize call only once

ответ

Смежные вопросы