使用onclick事件关闭JavaScript窗口

我们必须创建一个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);


}

---

一条评论说，

newWindow

没有在任何地方定义。我想你是想使用

myWindow

对象<代码>myWindow.close（）将起作用，因为它会关闭窗口

如果要在首次加载时执行此操作，应将其放入

窗口.onload

函数或自调用函数中。此外，为了在所有浏览器中完全兼容，您应该省略

resizeable=yes

部分，因为只有IE才支持这一部分

---

另外，如果您想使用jQuery，可以在

$（window.load（）

函数中执行此方法。

您可以使用

document.write（）

window.onload=function（）{
var largeImage=document.getElementById（“largeImage”）；
//var url=largeImage.getAttribute（'src'）；
var w=大图像自然宽度；
var h=较大的图像自然高度；
//打开空白窗口`
var popup=窗口。打开（“，”图像“
，“高度=”+h
+“，width=“+w
+“，可调整大小=是”）；
//将'img``outerHTML`写入'popup``窗口`
popup.document.write（largeImage.outerHTML）；
window.onclick=function（）{
//关闭`弹出窗口`
popup.document.write（“this.close（）”）；
//删除'onclick'处理程序
this.onclick=null；
}
}

plnkr

var新窗口；
函数windowOpener（）{
变量url=”http://stackoverflow.com/questions/36387144/closing-a-javascript-window-with-an-onclick-event";
newWindow=window.open（url，“弹出窗口”，“宽度=700，高度=500”）；
var timer=setInterval（函数（）{
if（newWindow.closed）{
警报（“窗口关闭”）；
清除间隔（计时器）；
}
}, 250)
}

---

打开一个窗口

谢谢大家的回答。 以下是我的问题的解决方案：

  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;
   }


}

函数滑动（）{
var largeImage=document.getElementById（'largeImage'）；
var url=largeImage.getAttribute（'src'）；
var w=大图像自然宽度；
var h=较大的图像自然高度；
var popup=window.open（url，“Image”，“height=“+h+”，width=“+w+”，resizable=yes）；
popup.document.write（“”）；
popup.onclick=函数（）{
//关闭`弹出窗口`
popup.document.write（“this.close（）”）；
//删除'onclick'处理程序
this.onclick=null；
}
}

您没有在任何地方设置

newWindow

，您的意思是

var newWindow=window.打开（…

？“然后您需要能够通过在窗口内单击再次关闭它”单击原始

窗口

或新打开的

窗口

应关闭打开的

窗口

？我想通过单击新打开的窗口内部来关闭弹出窗口。这允许我在弹出窗口内部单击时关闭弹出窗口，但整个弹出窗口的格式不再正确。它不会以高度=h和宽度不再为w。@Vulkanos“但整个弹出窗口的格式不再正确。它不再以高度=h和宽度=w打开”这是由于lorempixel中的图像未加载。请参见@Vulkanos。或者，plnkr的第3版在新打开的

窗口的
点击
关闭打开的
窗口
  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;
   }


}