<p>Scenario:</p>

<ol>
<li>The user has two monitors.</li>
<li>Their browser is open on the secondary monitor.</li>
<li>They click a link in the browser which calls window.open() with a specific top and left window offset.</li>
<li>The popup window always opens on their primary monitor.</li>
</ol>

<p>Is there any way in JavaScript to get the popup window to open on the same monitor as the initial browser window (the opener)?</p>

[{'answer_id': 57680, 'author': 'Jared', 'author_id': 1980, 'author_profile': 'https://Stackoverflow.com/users/1980', 'pm_score': -1, 'selected': False, 'text': "<p>as long as you know the x and y position that falls on the particular monitor you can do:</p>\n\n<pre><code>var x = 0;\nvar y = 0;\nvar myWin = window.open(''+self.location,'mywin','left='+x+',top='+y+',width=500,height=500,toolbar=1,resizable=0');\n</code></pre>\n"}, {'answer_id': 57684, 'author': 'rp.', 'author_id': 2536, 'author_profile': 'https://Stackoverflow.com/users/2536', 'pm_score': 5, 'selected': False, 'text': '<p>You can\'t specify the monitor, but you can specify the position of the popup window as being relative to the where the click caused the window to popup. </p>\n\n<p>Use the getMouseXY() function to get values to pass as the left and top args to the window.open() method. (the left and top args only work with V3 and up browsers).</p>\n\n<p>window.open docs:\n<a href="http://www.javascripter.net/faq/openinga.htm" rel="noreferrer">http://www.javascripter.net/faq/openinga.htm</a></p>\n\n<pre><code>function getMouseXY( e ) {\n    if ( event.clientX ) { // Grab the x-y pos.s if browser is IE.\n        CurrentLeft = event.clientX + document.body.scrollLeft;\n        CurrentTop  = event.clientY + document.body.scrollTop;\n    }\n    else {  // Grab the x-y pos.s if browser isn\'t IE.\n        CurrentLeft = e.pageX;\n        CurrentTop  = e.pageY;\n    }  \n    if ( CurrentLeft &lt; 0 ) { CurrentLeft = 0; };\n    if ( CurrentTop  &lt; 0 ) { CurrentTop  = 0; };  \n\n    return true;\n}\n</code></pre>\n'}, {'answer_id': 993724, 'author': 'WhyNotHugo', 'author_id': 107510, 'author_profile': 'https://Stackoverflow.com/users/107510', 'pm_score': 0, 'selected': False, 'text': "<p><em>If</em> you know the resolution of each monitor, you could estimate this.\nA bad idea for a public website, but might be useful if you know (for some odd reason) that this scenario will always apply.</p>\n\n<p>Relative position to the mouse (as said above) or to the original browser window could also be useful, Though you'd have to suppose the user uses the browser maximized (which is not necessarily true).</p>\n"}, {'answer_id': 4682246, 'author': 'Chase Seibert', 'author_id': 7679, 'author_profile': 'https://Stackoverflow.com/users/7679', 'pm_score': 4, 'selected': False, 'text': '<p>Here is something I shamelessly reverse engineered from the Facebook oauth API. Tested on a primary and secondary monitor in Firefox/Chrome.</p>\n\n<pre><code>function popup_params(width, height) {\n    var a = typeof window.screenX != \'undefined\' ? window.screenX : window.screenLeft;\n    var i = typeof window.screenY != \'undefined\' ? window.screenY : window.screenTop;\n    var g = typeof window.outerWidth!=\'undefined\' ? window.outerWidth : document.documentElement.clientWidth;\n    var f = typeof window.outerHeight != \'undefined\' ? window.outerHeight: (document.documentElement.clientHeight - 22);\n    var h = (a &lt; 0) ? window.screen.width + a : a;\n    var left = parseInt(h + ((g - width) / 2), 10);\n    var top = parseInt(i + ((f-height) / 2.5), 10);\n    return \'width=\' + width + \',height=\' + height + \',left=\' + left + \',top=\' + top + \',scrollbars=1\';\n}   \n\nwindow.open(url, "window name", "location=1,toolbar=0," + popup_params(modal_width, modal_height));\n</code></pre>\n'}, {'answer_id': 4786990, 'author': 'Ruan Mendes', 'author_id': 227299, 'author_profile': 'https://Stackoverflow.com/users/227299', 'pm_score': 3, 'selected': False, 'text': '<pre><code>// Pops a window relative to the current window position\nfunction popup(url, winName, xOffset, yOffset) {\n  var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);\n  var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);\n  return window.open(url, winName, \'top=\' +y+ \',left=\' +x))\n}\n</code></pre>\n\n<p>Call it like the following and it will open on top of the current window</p>\n\n<pre><code>popup(\'http://www.google.com\', \'my-win\');\n</code></pre>\n\n<p>Or make it slightly offset</p>\n\n<pre><code>popup(\'http://www.google.com\', \'my-win\', 30, 30);\n</code></pre>\n\n<p>The point is that window.screenX/screenLeft give you the position in relationship to the entire desktop, not just the monitor.</p>\n\n<p>window.screen.left would be the ideal candidate to give you the information you need. The problem is that it\'s set when the page is loaded and the user could move the window to the other monitor.</p>\n\n<p><strong>More research</strong> </p>\n\n<p>A final solution to this problem (beyond just offsetting from the current window position) requires knowing the dimensions of the screen that the window is in. Since the screen object doesn\'t update as the user moves a window around, we need to craft our own way of detecting the current screen resolution. Here\'s what I came up with</p>\n\n<pre><code>/**\n * Finds the screen element for the monitor that the browser window is currently in.\n * This is required because window.screen is the screen that the page was originally\n * loaded in. This method works even after the window has been moved across monitors.\n * \n * @param {function} cb The function that will be called (asynchronously) once the screen \n * object has been discovered. It will be passed a single argument, the screen object.\n */\nfunction getScreenProps (cb) {\n    if (!window.frames.testiframe) {\n      var iframeEl = document.createElement(\'iframe\');\n      iframeEl.name = \'testiframe\';\n      iframeEl.src = "about:blank";\n      iframeEl.id = \'iframe-test\'\n      document.body.appendChild(iframeEl);\n    }\n\n    // Callback when the iframe finishes reloading, it will have the \n    // correct screen object\n    document.getElementById(\'iframe-test\').onload = function() {\n      cb( window.frames.testiframe.screen );\n      delete document.getElementById(\'iframe-test\').onload;\n    };\n    // reload the iframe so that the screen object is reloaded\n    window.frames.testiframe.location.reload();\n};\n</code></pre>\n\n<p>So if you wanted to always open the window at the top left of whatever monitor the window is in, you could use the following:</p>\n\n<pre><code>function openAtTopLeftOfSameMonitor(url, winName) {\n  getScreenProps(function(scr){\n    window.open(url, winName, \'top=0,left=\' + scr.left);\n  })\n}\n</code></pre>\n'}, {'answer_id': 14290277, 'author': 'Suvi Vignarajah', 'author_id': 1417588, 'author_profile': 'https://Stackoverflow.com/users/1417588', 'pm_score': 0, 'selected': False, 'text': '<p>I ran into this issue recently and finally found a way to position the pop up window on the screen that it\'s triggered from. Take a look at my solution on my github page here: <a href="https://github.com/svignara/windowPopUp" rel="nofollow">https://github.com/svignara/windowPopUp</a></p>\n\n<p>The trick is in using the <code>window.screen</code> object, which returns <code>availWidth</code>, <code>availHeight</code>, <code>availLeft</code> and <code>availTop</code> values (as well as <code>width</code> and <code>height</code>). For a complete list of the variables in the object and what these variables represent look at <a href="https://developer.mozilla.org/en-US/docs/DOM/window.screen" rel="nofollow">https://developer.mozilla.org/en-US/docs/DOM/window.screen</a>.</p>\n\n<p>Essentially, my solution finds the values of the <code>window.screen</code> whenever the trigger for the popup is clicked. This way I know for sure which monitor screen it\'s being clicked from. The <code>availLeft</code> value takes care of the rest. Here\'s how:</p>\n\n<blockquote>\n  <blockquote>\n    <p>Basically if the first available pixel from the left (<code>availLeft</code>) is negative, that\'s telling us there is a monitor to the left of the "main" monitor. Likewise, if the first available pixel from left is greater than 0, this means one of 2 things:</p>\n    \n    <ol>\n    <li>The monitor is to the right of the "main" monitor, OR</li>\n    <li>There is some "junk" on the left side of the screen (possibly the application dock or windows start menu)</li>\n    </ol>\n  </blockquote>\n</blockquote>\n\n<p>In either case you want the offset of your popup to start from after the available pixel from the left.</p>\n\n<pre><code>offsetLeft = availableLeft + ( (availableWidth - modalWidth) / 2 )\n</code></pre>\n'}, {'answer_id': 26549914, 'author': 'user11153', 'author_id': 1795426, 'author_profile': 'https://Stackoverflow.com/users/1795426', 'pm_score': 2, 'selected': False, 'text': '<p>Open centered window on current monitor, working also with Chrome:</p>\n\n<pre><code>function popupOnCurrentScreenCenter(url, title, w, h) {\n    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : screen.left;\n    var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : screen.top;\n\n    var width = window.innerWidth ? window.innerWidth :\n        document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;\n    var height = window.innerHeight ? window.innerHeight :\n        document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;\n\n    var left = ((width / 2) - (w / 2)) + dualScreenLeft;\n    var top = ((height / 2) - (h / 2)) + dualScreenTop;\n    var newWindow =\n        window.open(url, title, \'scrollbars=yes, width=\' + w + \', height=\' + h + \', top=\' + top + \', left=\' + left);\n\n    // Puts focus on the newWindow\n    if (window.focus) {\n        newWindow.focus();\n    }\n}\n</code></pre>\n'}, {'answer_id': 52249716, 'author': 'hirano', 'author_id': 5113353, 'author_profile': 'https://Stackoverflow.com/users/5113353', 'pm_score': 0, 'selected': False, 'text': '<p>Only user11153\'s version works with Chrome and dual screen. Here is its TypeScript version.</p>\n\n<pre><code>popupOnCurrentScreenCenter(url: string, title: string, w: number, h: number): Window|null {\n    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : (&lt;any&gt;screen).left;\n    var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : (&lt;any&gt;screen).top;\n\n    var width = window.innerWidth ? window.innerWidth :\n        document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;\n    var height = window.innerHeight ? window.innerHeight :\n        document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;\n\n    var left = ((width / 2) - (w / 2)) + dualScreenLeft;\n    var top = ((height / 2) - (h / 2)) + dualScreenTop;\n    var newWindow =\n        window.open(url, title, \'scrollbars=yes, width=\' + w + \', height=\' + h + \', top=\' + top + \', left=\' + left);\n\n    // Puts focus on the newWindow\n    if (window.focus &amp;&amp; newWindow) {\n        newWindow.focus();\n    }\n    return newWindow;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/57652', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1436/']