弹出窗口 - 浏览器差异

时间:2011-07-04 16:28:38

标签: javascript cross-browser

我正在使用window.open创建弹出窗口并设置创建的屏幕的高度和宽度。

导航栏始终显示(因为这是我无法控制的浏览器设置)。问题是在IE / Firefox中,导航栏被排除在我定义的高度之外,这是好的,但在Chrome中,它不是,因此我的弹出窗口最终会被右侧滚动条缩小。

处理此问题的首选机制是什么。

使用函数设置检查浏览器类型的弹出高度,并根据结果添加调整?

 function popupCreator(url, popupname, height, width){

    if(browsertype=="chrome"){  //obviously not this exact code!
        height = height + 20;
    }

    var params = 'width=' + width + ',height=' + height;
    newwin = window.open(url, popupname, params);

 }

或者有更好的方法来实现这一目标吗?

我目前使用的全部功能:

 "popup": function (url, popupname, height, width) {
    if (null == width) {
        var width = screen.width / 2;
    }
    if (null == height) {
        var height = screen.height / 2;
    }

    var left = (screen.width - width) / 2;
    var top = (screen.height - height) / 2;
    var params = 'width=' + width + ',height=' + height;
    params += ',top=' + top + ',left=' + left;
    params += ',directories=no';
    params += ',location=no';
    params += ',menubar=no';
    params += ',resizable=no';
    params += ',scrollbars=no';
    params += ',status=no';
    params += ',toolbar=no';
    params += ',dialog=yes';
    params += ',titlebar=no';
    newwin = window.open(url, popupname, params);
    if (window.focus) { newwin.focus() }
    return false;
},

3 个答案:

答案 0 :(得分:1)

这是我的相同代码版本

我假设您在链接中执行了return popup(this.href,this.target,500,600)

"popup": function (url, popupname, height, width) {
    var w = width  || screen.width  / 2;
    var h = height || screen.height / 2;
    if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) h+=20;
    var left = (screen.width - w) / 2;
    var top  = (screen.height - h) / 2;
    var params = 'width=' + w + ',height=' + h;
    params += ',top=' + top + ',left=' + left;
    params += ',screenY=' + top + ',screenX=' + left; // let's support older NS too ;)

    // all params that are not mentioned are off per default, 
    // all params mentioned are true per default
//    params += ',directories=no';
//    params += ',location=no';
//    params += ',menubar=no';
    params += ',resizable'; // given as an example of a =yes
//    params += ',scrollbars=no';
//    params += ',status=no';
//    params += ',toolbar=no';
    params += ',dialog'; // NS/FF only thing
//    params += ',titlebar=no';
    var newwin = window.open(url, popupname, params);
    if (newwin) { 
      newwin.focus(); 
      return false; // cancel the href
    }
    return true; // follow the href, the window was blocked
}

答案 1 :(得分:0)

导航栏的可见性是可控的。例如:

window.open('http://some-url', 'window-name',
    'location=yes,links=no,scrollbars=yes,toolbar=no,status=no,width=716,height=480');

由于安全原因,位置是唯一无法隐藏的东西。

答案 2 :(得分:0)

由于chrome使用的是内部语法,而另一个浏览器不使用,因此您也可以在代码中使用它。让它变得如此简单!

window.open('http://some-url', 'window-name',
'location=yes,links=no,scrollbars=yes,width=716,height=480,innerHeight=510');

欢迎你! :d