porthole.js - 我怎么能收，我使用window.open（）打开一个标签，但新标签

Question

我需要生成使用window.open('...', '_blank');

然后一个标签，我需要关闭这个分页本身，当用户点击一个按钮时（按钮在新标签中）。

我可以控制两个应用程序的代码库和服务器。

我试过如下：

window.tab = window.open('http://localhost:5007', '_blank'); 

在app＃2：

在应用＃1

function clickedButton() { 
    window.opener.tab.close(); 
} 

不幸的是，我得到安全例外： 错误：封闭框架来源“http://localhost:5007”访问一个跨源帧。

我该如何解决这个错误？无论如何，我可以用这个库来克服这个问题吗？ https://github.com/ternarylabs/porthole

Answer 1

我只是在此处引用文档，仅供需要参考的任何人点击W3C和MDN。

function openWin() { 
    myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window 
} 

function closeWin() { 
    myWindow.close(); // Closes the new window 
} 

进行分解，在open和close函数使用比参数可以是非常有用的，比如URL，希望打开或关闭当前窗口的时候，或者在你的情况打开窗口。

一个实际的例子是this堆栈溢出问题。 N

我希望它有帮助！

编辑

要回答OP的编辑的问题：如果是触发其打开的窗口上的一个事件的问题，你可以在新窗口中有一个事件处理程序，这将触发window.close()像这样：

$('#anElementId').click(function() { window.opener.$('body').trigger('theCloseEvent', anyPassedData); }) 

但是，如果你真的是有在新的标签控制，因为它会导致它的代码库，你是在控制的URL，那么它只是触发事件的问题那里你可以触发该窗口加载一次，或一旦你点击一个按钮...像这样：

HTML

<button id="close-window">Close me</button> 

的Javascript/jQuery的：

$(document).ready(function(){ 
    $("#close-window").click(function(){ 
     alert("ok"); 
     window.close(); 
    }); 
}); 

编辑＃2

要进一步扩展OP的编辑，我想在这里包含一个问题，当试图触发打开的窗口关闭自己时很容易遇到。

从How can I close a browser window without receiving the “Do you want to close this window” prompt?报价：

Scripts are not allowed to close a window that a user opened. This is considered a security risk. Though it isn't in any standard, all browser vendors follow this (Mozilla docs). If this happens in some browsers, it's a security bug that (ideally) gets patched very quickly.

None of the hacks in the answers on this question work any longer, and if someone would come up with another dirty hack, eventually it will stop working as well.

I suggest you don't waste energy fighting this and embrace the method that the browser so helpfully gives you — ask the user before you seemingly crash their page.

换句话说，除非你的网页的脚本有，就是打开窗口的控制，你应该不能说接近/窗。这是因为运行window.close的脚本无法控制打开的窗口。

编辑＃3

所以很多编辑我知道了！但我在日常工作之间回答这个问题，所以忍耐着我。要回答porthole.js的问题，应该有更多的可能性去做，但是你需要意识到你正在使用iframe。

有一个显著差异与网站工作VS与I帧，在iframe会Widget和网站（包括微型站点）工作时给出一个网址。在安全性和沙箱方面也有很多考虑因素，可以在portholejs demo here上看到。这种差异也是不允许你以最初的方式使用不同网站的方式。

我的建议是相对于您的实现，以评估你的选择：网站，网站VS网站，窗口小部件。

祝你好运！

Answer 2

好吧，我能在我理论用porthole.js的方式来做到这一点。 我相信这是在不使用黑客的情况下完成此操作的唯一跨浏览器方式。

解决方案包括2个应用程序（你必须将代码添加到应用程序都为这个工作）。

app #1: http://localhost:4000 
app #2: http://localhost:5000 

就我而言，我需要应用＃1来产生一个包含应用＃2的需求选项卡。然后，我需要应用＃2才能在单击应用＃2内的按钮时关闭它自己。

如果这些应用分别对相同的域（包括相同的端口），这将是通过在应用程序＃1保存到标签的基准相对容易：

window.tab = window.open('...', '_blank'); 

然后从应用程序内访问该参考通过window.opener.tab.close()

但是＃2，我的情况下，应用程序需要的是对差异域和这样的方法导致了浏览器的安全例外。相反，我需要做的是在应用程序＃1的iframe中（在某些特定的路线上，比如/ iframe）托管应用程序＃2，这样，就浏览器窗口而言，它们位于相同的域中，现在第二个标签应该能够使用window.opener.tab.close()关闭自己。

但是，问题仍然存在，因为我需要将触发器设置为INSIDE应用程序＃2（也称为iframe中的按钮），并且由于托管应用程序和iframe应用程序再次不在同一个域中，好像我会回到原点......或者不是。

在这种情况下，porthole.js节省了一天。您必须将porthole.js加载到两个应用程序中（这就是为什么您需要访问这两个代码库）。下面的代码：

在应用＃1（http://localhost:4000/iframe）

// create a proxy window to send to and receive messages from the iFrame 
var windowProxy; 
window.onload = function() { 
    windowProxy = new Porthole.WindowProxy(
     'http://localhost:5000', 'embedded-iframe'); 

    windowProxy.addEventListener(function(event) { 
     //handle click event from iframe and close the tab 
     if(event == 'event:close-window') { 
      window.opener && window.opener.tab && window.opener.tab.close(); 
     } 
    }); 
} 

在app＃2：（http://localhost:5000）

var windowProxy; 
    window.onload = function() { 
     windowProxy = new Porthole.WindowProxy(
      'http://localhost:4000/#/iframe'); 

     $('button').on('click', function() { 
      windowProxy.post('event:close-window'); 
     }); 
    } 

和WA-啦，自封闭标签。