Question

我们必须创建一个用于打开新窗口的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);


}

Answer 1

评论说newWindow未在任何地方定义。我认为你打算使用myWindow对象。 myWindow.close()将起作用，因为它会关闭窗口。

如果要在第一次加载时执行此操作，则应将其放在window.onload函数或自调用函数中。此外，为了在所有浏览器中完全兼容，您应该省略resizable=yes部分，因为仅在IE中支持。

此外，如果要使用jQuery，可以在$(window).load()函数中执行此方法。

Answer 2

您可以使用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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

以下是关闭时打开和检测的代码。

以下是codepen.io http://codepen.io/sujeetkrjaiswal/pen/vGebqy

上的示例代码

由于某种原因，代码在stackoverflow中没有运行，在codepen上尝试。

Answer 4

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

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


}

使用onclick事件关闭JavaScript窗口

4 个答案: