打开新标签页，然后侦听正在触发的事件

Question

用Javascript是否可以打开一个新选项卡，然后侦听该选项卡引发事件？

我已经看到此内容可以监听某些标签事件，但是可以代替window ，而是将我打开的特定标签定位为目标吗？

Answer 1

不，你不能。 好吧，不是直接的。

出于明显的安全原因，javascript只能从其自己的标签/窗口访问数据。 但是，您可以使用Cookie，locastorage或...从同一域中存储和读取数据。

您可以将EventListner添加到localstorage对象（在域之间共享）。 例如，Soundcloud就是这样做的。

编辑：我认为window.open和新选项卡之间存在混淆。

window.open打开一个弹出窗口。 然后，您可以从脚本中访问该弹出窗口。 但是请注意，弹出窗口的显示方式因浏览器而异。 有些人在新选项卡中打开它，有些人在新窗口中打开...。但是请注意，要访问弹出窗口，它必须具有相同的域，协议，端口等。

但是，如果用户手动打开新窗口/标签到您的站点，则此方法将不起作用，因为您没有对此的引用。

Answer 2

这似乎对我来说很好

在父窗口中

var form = window.open('/formsv2/add', '_blank', 'resizable=1', true);
form.addEventListener('formAdded', function(data) {
    console.log('formAddedEvent');
    console.log(data.name);
    console.log(data.id);
    $('#formIdSelect').append('<option value="'+data.id+'">'+data.name+'</option>').val(data.id);
});

在弹出窗口中

var evt = document.createEvent("Events")
evt.initEvent('formAdded', true, true); //true for can bubble, true for cancelable
evt.name = $('#title').val();
evt.id = data.form;
document.dispatchEvent(evt);

Answer 3

以下解决方案为我工作：

父窗口

 var win = window;
 win.open('url', 'newWindow', 'height=300,width=300');

 win.addEventListener('message', function(response){
    console.log(response.data);
},false);

子窗口

window.opener.postMessage('Success', "*");