使用Javascript中心弹出窗口并传递html的正确方法

时间:2009-12-30 00:23:33

标签: javascript html popup

目标:快速而肮脏的应用程序(仅限客户端)从一个页面获取一些参数并将结果放到新页面上,可以打印然后关闭。然后可以更改原始页面上的参数并弹出新页面。

以此为出发点: https://developer.mozilla.org/en/DOM/window.open http://www.yourhtmlsource.com/javascript/popupwindows.html

概念证明(最终版本将有大约10个输入/参数)

HTML片段

<input type="text" id="x">
<form>
<input type=button value="Calculate" onClick="javascript:genResults()">
</form>

JS

function dirtypop(arg)
{
  var popwin=window.open('','name','height=300,width=400,status=1,center=1');

  popwin.document.write('<html><head><title>Square</title>');
  popwin.document.write('</head><body>');
  popwin.document.write('<h1>Squared plus one is: '+arg+'</h1>');
  popwin.document.write('<p><a href="javascript:self.close()">Close</a> this window</p>');
  popwin.document.write('</body></html>');
  popwin.document.close();
};
function genResults() 
{
  x = document.getElementById('x').value;
  if (x == parseFloat(x)) 
  {
    dirtypop(x*x+1);
  }
};

这可行(在FF3.5和Chrome上测试),但新窗口不会突然显示在中心。如何居中? Mozzila说需要chrome = yes并谈论UniversalPrivilege脚本,那些是什么样的野兽?

还有其他可以改进的地方吗?

2 个答案:

答案 0 :(得分:3)

这是我的一个自定义跨浏览器脚本,可以动态重复使用,以便在屏幕上任意大小的任何弹出窗口居中:


// here's the script
function popWindow(url,winName,w,h) {
    if (window.open) {
        if (poppedWindow) { poppedWindow = ''; }
        //GET SIZE OF WINDOW/SCREEN
        windowW = w;
        windowH = h;
        var windowX = (screen.width/2)-(windowW/2);
        var windowY = (screen.height/2)-(windowH/2);
        var myExtra = "status=no,menubar=no,resizable=yes,toolbar=no,scrollbars=yes,addressbar=no";
        var poppedWindow = window.open(url,winName,'width='+w+',height='+h+',top='+windowY+',left=' + windowX + ',' + myExtra + '');
        setTimeout(refreshThis,3000);
    }
    else {
        alert('Your security settings are not allowing our popup windows to function. Please make sure your security software allows popup windows to be opened by this web application.');
    }
}


// and you would call it like this:
popWindow('http://www.myurl.com/','myPoppedWindowName','500','400');

// With this example call you would pop a window with a url of http://www.myurl.com/ 
// which is given the name of myPoppedWindowName 
// and a width of 500px along with height of 400px 
// which gets centered on the screen according to these size parameters

考虑到它确实是一个跨浏览器的实现,包括与2001年以后的浏览器的反向兼容性,这将做到这一点。它还包含一个检查,以确保最终用户启用了弹出窗口。

答案 1 :(得分:1)

您需要设置top和left属性,而不是center = 1。

var left = (screen.width - windowWidth) / 2;
var top = (screen.height - windowHeight) / 2;