使用onclick事件關閉JavaScript窗口

我們必須創建一個JavaScript來打開一個新窗口，然後您需要能夠通過在窗口內單擊來再次關閉它。但我的代碼不起作用，請問有人可以給我一個答案，說明如何做到最好？使用onclick事件關閉JavaScript窗口

function swipe() { 
    var largeImage = document.getElementById('largeImage'); 
    var url = largeImage.getAttribute('src'); 
    var w = largeImage.naturalWidth; 
    var h = largeImage.naturalHeight; 

    window.open(url,"Image", "height="+ h +", width="+ w +", resizable=yes"); 

    var myWindow = window.self; 

    myWindow.addEventListener("click", clickHandler); 

    var elementIsClicked = false; 

    function clickHandler(){ 
    elementIsClicked = true 
    } 

    function isElementClicked(){ 
    if(elementIsClicked){ 
      newWindow.close(); 
    } 
    } 

    setInterval(isElementClicked, 500); 


}

來源

2016-04-03 Vulkanos

您還沒有設置'newWindow'的任何地方，你的意思是'無功newWindow = window.open（...' –

_「，然後你需要？能夠通過點擊窗口內的點擊再次關閉它「_點擊原來的'window'或新打開的'window'應該關閉打開的'window'？ – guest271314

我想通過點擊新打開的窗口內的關閉彈出框 – Vulkanos

謝謝大家的回答。這裏是解決我的問題：

function swipe() { 
    var largeImage = document.getElementById('largeImage'); 
    var url = largeImage.getAttribute('src'); 
    var w = largeImage.naturalWidth; 
    var h = largeImage.naturalHeight; 

    var popup = window.open(url,"Image", "height="+ h +", width="+ w +", resizable=yes"); 


    popup.document.write('<img src="women_running_small.jpg" id="largeImage" style="width:95% ;height:95%; object-fit:contain"/>'); 
    popup.onclick = function() { 
    // close `popup` 
    popup.document.write("<script>this.close()<\/script>"); 
    // remove `onclick` handler 
    this.onclick = null; 
    } 


}

來源

2016-04-07 12:11:33 Vulkanos

有評論說newWindow沒有在任何地方定義。我想你打算使用myWindow對象。 myWindow.close()將工作，因爲它關閉了窗口。

如果要在第一次加載時執行此操作，應將其放入window.onload函數或自調用函數中。此外，爲了在所有瀏覽器中完全兼容，您應該省略resizable=yes部分，因爲只有IE支持該部分。

此外，如果您想使用jQuery，您可以在$(window).load()函數內執行此方法。

來源

2016-04-03 15:36:43

可以利用document.write()

window.onload = function() { 
    var largeImage = document.getElementById("largeImage"); 
    // var url = largeImage.getAttribute('src'); 
    var w = largeImage.naturalWidth; 
    var h = largeImage.naturalHeight; 
    // open blank `window` 
    var popup = window.open("", "Image" 
          , "height="+ h 
          +", width="+ w 
          +", resizable=yes"); 
    // write `img` `outerHTML` to `popup` `window` 
    popup.document.write(largeImage.outerHTML); 
    window.onclick = function() { 
    // close `popup` 
    popup.document.write("<script>this.close()<\/script>"); 
    // remove `onclick` handler 
    this.onclick = null; 
    } 
}

plnkr http://plnkr.co/edit/0KUPw3UlEF0ONO1vDoOU?p=preview

來源

2016-04-03 15:41:32 guest271314

This allowes我點擊彈出窗口時關閉彈出窗口，但是整個彈出窗口不再是正確的格式，它不再以height = h和width = w打開。 – Vulkanos

@Vulkanos _「但是整個彈出窗口是不再是正確的格式，它不會以height = h和width = w打開「_T他是由於lorempixel的圖像沒有加載。請參閱http://plnkr.co/edit/xZxZAp6W8z0UkWYYKXha?p=preview – guest271314

@Vulkanos或者，版本3的plnkr關閉時會在新打開的'window'的'click'處打開'window' http://plnkr.co/edit/ xZxZAp6W8z0UkWYYKXha？p =預覽 – guest271314

var newWindow; 
 

 
function windowOpener() { 
 
    var url = "http://stackoverflow.com/questions/36387144/closing-a-javascript-window-with-an-onclick-event"; 
 
    newWindow = window.open(url, "Popup", "width=700,height=500"); 
 
    var timer = setInterval(function() { 
 
    if (newWindow.closed) { 
 
     alert("window closed"); 
 
     clearInterval(timer); 
 
    } 
 
    }, 250) 
 
}

<button onclick="windowOpener();">Open a window</button>

下面是用於打開和檢測時，它關閉所述的代碼。

這裏是codepen.io http://codepen.io/sujeetkrjaiswal/pen/vGebqy

的代碼沒有在計算器由於某種原因，運行過程中出現的示例代碼，試試codepen。

來源

2016-04-03 15:47:07

使用onclick事件關閉JavaScript窗口

回答

相關問題