Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Изображение в новом окне при window.open


Автор: barcelona 20.2.2012, 17:51
Здравствуйте!
Хрестоматийный пример при нажатии на кнопку
Код

var newWin = window.open("/page/42/","PopWin3","width=321,height=261,resizable=0,toolbar=0,location=0,menubar=0,status=0,scrollbars=0");

Отключается всё, кроме resizable. 
Браузеры: Chrome 7.0.517.44, Firefox 5.0, Opera 11.0.
И более общий вопрос: как можно сделать открытие изображения или flash-ролика в новом окне, чтобы это окно было размером точно под содержимое? Проблем здесь вижу 2:
1) Уже описанная с resizable
2) Определение размера окна. При задании размеров в window.open в каждом браузере получается окно разного размера.

Автор: ksnk 20.2.2012, 19:22
Накопал у себя в коде вот такое. Основной смысл - пытаемся подстроить свой размер после вывода в окне.
Код

function WindowO(s,w,h)
{
    if(typeof(s)!='string'){
        s=s.getAttribute('href');
        // if($x && ($x.length>2)) { return true;}
        if(s.match(/\/$/)) return false ;
    } 
    try{
      var par="location=no,toolbar=no,resizable=yes";
      if((w+100>window.screen.width)||(h+100>window.screen.height))
        par+=",scrollbars=yes";
      if(w) par+=',width='+w;
      if(h) par+=',height='+h;
      var wind=open("","win",par);
      wind.document.writeln('<html>'+
        '<head><title><'+'/title><style>body,html{width:100%;height:100%;padding:0;margin:0;}\n'+
        'body{overflow:auto;}\n</'+'style>\n<'+'script>function fitPic(){'+
        'iWidth = window.innerWidth||document.body.clientWidth;'+
        'iHeight = window.innerHeight||document.body.clientHeight;'+
        'iWidth = document.images[0].width - iWidth;'+
        'iHeight = document.images[0].height - iHeight;'+
        'if(iWidth && iHeight)window.resizeBy(iWidth,iHeight);self.focus();'+
        //'alert([window.screen.height,window.screen.width, iWidth,iHeight,document.images[0].width,window.innerWidth,document.body.clientWidth]);'+
        '};</'+'script>'+
        '<'+'/head><'+'body onload="fitPic()">'+
        '<img src="'+s+'"><button style="position:absolute;right:10px;bottom:10px;" '+
        'onclick="self.close();">close</button><'+'/body><'+'/html>');
      wind.document.close();
    } catch(e) {
      alert('Всплывающие окна заблокированы! Разрешите всплывающие окна для нормального функционирования.')
    }
    return false;
}

При этом поверх картинки в нижнем правом углу выводилась кнопка закрытия окна. Некоторые пользователи пугались гигантских картинок неожиданно возникающих по клику и не могли сразу найти кнопку закрытия окна. Наличие кнопки вызывало у них ощущение контроля над ситуацией  smile 

Применение - такое
Код


<img src="thumb.img.jpg" onclick="WindowO('big.img.jpg')">

<a href="big.img.jpg" onclick="return WindowO(this,600,400)"><img src="thumb.img.jpg"> </a>



Впрочем, сам я перешел на всплывающие галереи и как-то не пользуюсь уже такой штукой. Но может пригодится ;)

P.S.
так правильнее.

Автор: $дмитрий 20.2.2012, 20:48
Принципиально нужно окно? Почему бы не отображать flash-ролик в всплывающем слое? Примерно как здесь http://fancybox.net/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)