使用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窗口

回答

相关问题