如何使用JavaScript在弹出窗口中捕获事件？

Question

I have opened an external url as popup window.

var myWindow = window.open("http://google.com/","MsgWindow","width=500,height=600");

Now, I need to check whether the user clicked the search button or not.

I tried to select using jquery selectors like

myWindow.$('#gbqfba').onClick(function(){
     alert('abc');
});

But, It is not working. :( Can you help me..

Thanks in advance.

Answer 1

This can only work if both the pages are under the same domain.

This will work on your console while you are at stackoverflow.com:

var myWindow = window.open("http://stackoverflow.com/","MsgWindow", "width=500","height=600");
$(myWindow).on('click', 'a', function() {alert('a')})

This won't:

var myWindow = window.open("http://google.com/","MsgWindow", "width=500","height=600");
$(myWindow).on('click', 'a', function() {alert('a')})

Answer 2

Why can't you just capture the click on the search button?

<button type="button" id="search">Search</button>

and in your jQuery

$("#search").click(function(){
    var myWindow = window.open("http://google.com/","MsgWindow","width=500,height=600");

});

Answer 3

I don't think you can use javascript to detect events take place in a different window. You can try, instead of using window.open(), loading the page (google.com in your case) to an iframe in a form of lightbox or similar js plugins.

Even if you do that, the browser won't let you tap into the content inside the iframe. You won't be able to detect exactly what the user clicks, but you can find out once the user has triggered a click event using this script.

$('window').click( function(e){
    console.log('User Clicked outside the iframe');
});

$('window').blur( function(e){
    console.log('User clicked on the iframe or outside the page');
});​