JavaScript彈出窗口焦點問題
[英]Javascript pop-up window focus issue
問題描述
我想創建一個“彈出窗口”，每次單擊按鈕時都會獲得焦點。 下面的函數可以通過onclick事件很好地執行，但是當刷新父頁面並通過onload事件執行父頁面時，該函數無法按預期執行。
這是我的功能：
function PopupDelete(delete_images)
{
var win = window.open('URL','PopupDelete','width=500,height=400,scrollbars=yes');
win.focus();
}
因此，如果我從下面的按鈕使用它，它將按預期工作。
<input type="button" name="delete" value="Images" class="smallbutton" onclick="PopupDelete(delete_images);">
現在我遇到的問題是，我們在按鈕上使用了另一個名為set_mode的方法，而不是直接調用PopupDelete函數。
function set_mode(mode)
{
document.MASTER.mode.value = mode;
document.MASTER.submit();
}
<input type="button" name="delete" value="Images" class="smallbutton" onclick="set_mode('delete');">
它將主表單中的模式設置為“刪除”並提交表單。 登陸頁面是表單所在的頁面。 因此，它會進行一些php驗證，並在body標簽內使用onload方法執行PopupDelete函數。
<body onload='PopupDelete(delete_images)'>
如果沒有打開彈出窗口，則可以正常工作，但是如果彈出窗口已經打開並已最小化，則彈出窗口將無法獲得焦點。 有趣的是，它確實可以識別並更新彈出窗口上呈現的內容，但不能識別.focus（）。
任何建議將被廣泛贊賞。
2 個解決方案
解決方案1
3 已采納 2014-08-13 21:28:02
在沒有用戶交互的情況下打開彈出窗口和在沒有用戶交互的情況下聚焦彈出窗口都是由於瀏覽器安全性而引起的。 同樣因為安全性是獨立維護的，所以這是特定於瀏覽器的。
如果用戶已經接受顯示阻止的彈出窗口，則似乎可以在沒有用戶交互的情況下打開彈出窗口。 但是允許彈出窗口不允許在任何彈出窗口對象上調用focus方法。 如果您需要更多信息， 此其他SO答案將涉及此內容 。
您可以使用以下代碼演示此問題。 加載頁面不允許在Safari，Chrome或Firefox中都無法打開彈出式窗口（請注意，我在Mac上，因此Windows的瀏覽器結果可能有所不同）。 如果您允許阻止的彈出窗口，或者已經從以前訪問該站點的情況下打開了彈出窗口，則將在所有3個瀏覽器中重新加載該窗口的URL。 只有Safari允許在沒有用戶交互（ onload ）的情況下將focus在這個已經彈出的窗口上，而Chrome和Firefox則不允許。 但是，正如您看到的那樣，單擊“焦點”按鈕仍會將彈出窗口集中在所有3個瀏覽器上，這表明有可能，但瀏覽器只是對其進行了阻止。 因此，據我所知，這僅在Safari中是可行的（再次記住，我沒有嘗試過IE）。 但是，無論哪種方式，我都不認為強迫您的用戶使用特定的瀏覽器正確地查看您的網站是件好事。
var w;
function PopupDelete(delete_images) {
w = window.open('/testing/t/', 'PopupDelete', 'width=500,height=400,scrollbars=yes');
console.log(w);
w.focus();
}
$(function () {
PopupDelete();
$('#open').click(PopupDelete);
$('#focus').click(function () {
console.log('f', w);
w.focus();
});
});
還要記住，即使可以這樣做，在重新加載父窗口時，它也會重新打開彈出窗口並替換上一個窗口（這是必須要做的，因為據我所知，您無法獲得先前打開的window對象窗口，如果不先重新打開該變量就無法維護該變量以使其聚焦。 因此，此彈出窗口無論如何都無法保持其完整性。 我相信必須有更好的方法來完成此任務。
解決方案2
0 2014-08-20 11:46:46
在頁面加載中，您可以顯示此彈出窗口
$(document).ready(function () {
window.open("URL","Hello","width=500,height=500,scrollbars=yes")
});
JavaScript彈出窗口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.