Làm thế nào để hoạt Javascript để mở một cửa sổ popup trên màn hình hiện tại

Question

Kịch bản:

1. Người sử dụng có hai màn hình.
2. Trình duyệt của họ mở trên màn hình phụ.
3. Họ nhấp vào liên kết trong trình duyệt gọi window.open() với chênh lệch cửa sổ trên cùng và bên trái.
4. Cửa sổ bật lên luôn mở trên màn hình chính của chúng.

Có cách nào trong JavaScript để cửa sổ bật lên mở trên cùng một màn hình với cửa sổ trình duyệt ban đầu (trình mở) không?

Answer 1

miễn là bạn biết x và vị trí y rơi trên màn hình đặc biệt mà bạn có thể làm:

var x = 0; 
var y = 0; 
var myWin = window.open(''+self.location,'mywin','left='+x+',top='+y+',width=500,height=500,toolbar=1,resizable=0'); 

Answer 2

Bạn không thể chỉ định giám sát, nhưng bạn có thể xác định vị trí của các cửa sổ popup như liên quan đến nơi nhấp chuột khiến cửa sổ bật lên.

Sử dụng hàm getMouseXY() để nhận giá trị để chuyển sang bên trái và trên cùng với phương thức window.open(). (bên trái và trên cùng args chỉ làm việc với V3 và lên trình duyệt).

window.open tài liệu: http://www.javascripter.net/faq/openinga.htm

function getMouseXY(e) { 
    if (event.clientX) { // Grab the x-y pos.s if browser is IE. 
     CurrentLeft = event.clientX + document.body.scrollLeft; 
     CurrentTop = event.clientY + document.body.scrollTop; 
    } 
    else { // Grab the x-y pos.s if browser isn't IE. 
     CurrentLeft = e.pageX; 
     CurrentTop = e.pageY; 
    } 
    if (CurrentLeft < 0) { CurrentLeft = 0; }; 
    if (CurrentTop < 0) { CurrentTop = 0; }; 

    return true; 
} 

Answer 3

Nếu bạn biết giải pháp của mỗi màn hình, bạn có thể ước lượng này. Một ý tưởng tồi cho một trang web công cộng, nhưng có thể hữu ích nếu bạn biết (vì một số lý do kỳ lạ) rằng kịch bản này sẽ luôn áp dụng.

Vị trí tương đối với chuột (như đã nói ở trên) hoặc cửa sổ trình duyệt ban đầu cũng có thể hữu ích, Mặc dù bạn phải giả sử người dùng sử dụng trình duyệt tối đa (điều này không nhất thiết đúng).

Answer 4

Đây là điều tôi không biết xấu hổ được thiết kế lại từ API oauth của Facebook. Thử nghiệm trên màn hình chính và phụ trong Firefox/Chrome.

function popup_params(width, height) { 
    var a = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft; 
    var i = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop; 
    var g = typeof window.outerWidth!='undefined' ? window.outerWidth : document.documentElement.clientWidth; 
    var f = typeof window.outerHeight != 'undefined' ? window.outerHeight: (document.documentElement.clientHeight - 22); 
    var h = (a < 0) ? window.screen.width + a : a; 
    var left = parseInt(h + ((g - width)/2), 10); 
    var top = parseInt(i + ((f-height)/2.5), 10); 
    return 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',scrollbars=1'; 
} 

window.open(url, "window name", "location=1,toolbar=0," + popup_params(modal_width, modal_height)); 

Answer 5

// Pops a window relative to the current window position 
function popup(url, winName, xOffset, yOffset) { 
    var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0); 
    var y = (window.screenY || window.screenTop || 0) + (yOffset || 0); 
    return window.open(url, winName, 'top=' +y+ ',left=' +x)) 
} 

Gọi nó như sau và nó sẽ mở ra trên cùng của cửa sổ hiện tại

popup('http://www.google.com', 'my-win'); 

Hoặc làm cho nó một chút bù đắp

popup('http://www.google.com', 'my-win', 30, 30); 

Vấn đề là cửa sổ đó. screenX/screenLeft cho bạn vị trí trong mối quan hệ với toàn bộ màn hình, chứ không chỉ màn hình.

window.screen.left sẽ là ứng cử viên lý tưởng để cung cấp cho bạn thông tin bạn cần. Vấn đề là nó được đặt khi trang được tải và người dùng có thể di chuyển cửa sổ sang màn hình khác.

Nhiều nghiên cứu

Một giải pháp cuối cùng cho vấn đề này (ngoài chỉ bù đắp từ vị trí cửa sổ hiện hành) đòi hỏi phải biết kích thước của màn hình cửa sổ đang ở. Kể từ khi đối tượng màn hình không cập nhật khi người dùng di chuyển một cửa sổ xung quanh, chúng ta cần tạo ra cách riêng để phát hiện độ phân giải màn hình hiện tại. Dưới đây là những gì tôi đã đưa ra

/** 
* Finds the screen element for the monitor that the browser window is currently in. 
* This is required because window.screen is the screen that the page was originally 
* loaded in. This method works even after the window has been moved across monitors. 
* 
* @param {function} cb The function that will be called (asynchronously) once the screen 
* object has been discovered. It will be passed a single argument, the screen object. 
*/ 
function getScreenProps (cb) { 
    if (!window.frames.testiframe) { 
     var iframeEl = document.createElement('iframe'); 
     iframeEl.name = 'testiframe'; 
     iframeEl.src = "about:blank"; 
     iframeEl.id = 'iframe-test' 
     document.body.appendChild(iframeEl); 
    } 

    // Callback when the iframe finishes reloading, it will have the 
    // correct screen object 
    document.getElementById('iframe-test').onload = function() { 
     cb(window.frames.testiframe.screen); 
     delete document.getElementById('iframe-test').onload; 
    }; 
    // reload the iframe so that the screen object is reloaded 
    window.frames.testiframe.location.reload(); 
}; 

Vì vậy, nếu bạn muốn luôn luôn mở cửa sổ ở phía trên bên trái của bất cứ màn hình cửa sổ đang nhập, bạn có thể sử dụng như sau:

function openAtTopLeftOfSameMonitor(url, winName) { 
    getScreenProps(function(scr){ 
    window.open(url, winName, 'top=0,left=' + scr.left); 
    }) 
} 

Answer 6

Tôi chạy vào vấn đề này gần đây và cuối cùng đã tìm thấy một cách để định vị cửa sổ bật lên trên màn hình được kích hoạt từ đó. Hãy nhìn vào giải pháp của tôi trên trang github của tôi ở đây: https://github.com/svignara/windowPopUp

Bí quyết là trong việc sử dụng các đối tượng window.screen, mà trả về availWidth, availHeight, availLeft và availTop giá trị (cũng như width và height). Để có danh sách đầy đủ các biến trong đối tượng và những biến này đại diện cho cái nhìn tại https://developer.mozilla.org/en-US/docs/DOM/window.screen.

Về cơ bản, giải pháp của tôi tìm giá trị của window.screen bất cứ khi nào trình kích hoạt cho cửa sổ bật lên được nhấp. Bằng cách này tôi biết chắc chắn màn hình màn hình nào đang được nhấp vào. Giá trị availLeft sẽ xử lý phần còn lại. Đây là cách:

Về cơ bản nếu pixel có sẵn đầu tiên từ bên trái (availLeft) là tiêu cực, đó là nói cho chúng ta có một màn hình bên trái của màn hình "chính". Tương tự như vậy, nếu pixel có sẵn đầu tiên từ bên trái là lớn hơn 0, điều này có nghĩa một trong 2 điều:

1. Màn hình đang ở bên phải của màn hình "chính", HOẶC
2. Có một số "rác" ở phía bên trái của màn hình (có thể áp dụng bến hoặc cửa sổ start menu)

trong cả hai trường hợp bạn muốn bù đắp của popup của bạn để bắt đầu từ sau khi pixel có sẵn từ bên trái.

offsetLeft = availableLeft + ((availableWidth - modalWidth)/2) 

Answer 7

mở trung tâm cửa sổ trên màn hình hiện tại, làm việc cũng với Chrome:

function popupOnCurrentScreenCenter(url, title, w, h) { 
    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : screen.left; 
    var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : screen.top; 

    var width = window.innerWidth ? window.innerWidth : 
     document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; 
    var height = window.innerHeight ? window.innerHeight : 
     document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; 

    var left = ((width/2) - (w/2)) + dualScreenLeft; 
    var top = ((height/2) - (h/2)) + dualScreenTop; 
    var newWindow = 
     window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); 

    // Puts focus on the newWindow 
    if (window.focus) { 
     newWindow.focus(); 
    } 
}