Cannot Add Event Listener

Question

i can add an event listener for clicks to blank but not to twitter in the code below.

const blank = window.open();
const twitter = window.open("https://twitter.com");

const PrintClick = function (name) {
    return function (...args) {
        console.log(name, ...args);
    };
};

blank.addEventListener("click", PrintClick("blank"));
twitter.addEventListener("click", PrintClick("twitter"));

is it because twitter has done something to not let me do this? would there be a way to get around it?

I think that some exception is also thrown on the console. Can you please check and update Question. — AyushKatiyar, Mar 18 '20 at 06:01
@AyushKatiyar i personally didn’t get any errors. it just fails silently ☹️ — Min Andy Choi, Mar 18 '20 at 06:07
It did not fail silently It was blocked by browser. I have mentioned in the answer. — AyushKatiyar, Mar 18 '20 at 07:10

score 0 · Answer 1 · answered Mar 18 '20 at 05:59

0

addEventListener can only listen to the dom object of the current page, you can consider selenium automation framework operations

answered Mar 18 '20 at 05:59

bojue

54
4

1

but my code has successfully added an event listener for clicks to `blank` though. if i go to the blank window and click in random places the original window logs those clicks to the console. it just doesn’t work with twitter – Min Andy Choi Mar 18 '20 at 06:01
same origin policy – bojue Mar 18 '20 at 06:06
is there a way to turn that off? – Min Andy Choi Mar 18 '20 at 06:06

AyushKatiyar · Answer 2 · 2020-03-18T06:48:40.597

The reason that you did not got any exception :

Most browsers don't support multiple popups so in order to accomplish it wou need to try using:

window.open(yoururl,"_blank",'PopUp',randomnumber,'scrollbars=1,menubar=0,resizable=1,width=850,height=500');

Or Give each window a new window name.

window.open(url, WindowName)

Security Risk

You can't add an event listner with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin.

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/...

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Examples

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname

Not recommended

Disabling same-origin policy in your browser

I'll link the relative answer. However, please remember that disabling the same-origin policy will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should NEVER be done if you do not know exactly what you are doing (e.g. development purposes).

thanks a lot for your very clear and helpful answer. is this also why [this](https://stackoverflow.com/q/60725633/8966013) didn’t work? i was trying to copy and paste some javascript into the console while i have the website open and click a button through javascript — Min Andy Choi, Mar 18 '20 at 06:22
@MinAndyChoi There are 2 problems with your sollution. Please refer to answer I have updated my answer. — AyushKatiyar, Mar 18 '20 at 06:34
@MinAndyChoi https://javascript.info/cross-window-communication article that you can refer to. — AyushKatiyar, Mar 18 '20 at 07:05

score 0 · Answer 3 · answered Mar 18 '20 at 06:20

0

For security reasons browsers disable any interaction across domains that you do not own. Imagine all the things one could do with that.

answered Mar 18 '20 at 06:20

Abhishek Kumar Tiwari

663
4
13

i see that now. is it also why [this](https://stackoverflow.com/q/60725633/8966013) didn’t work? i was trying to copy and paste javascript into the console while i have the twitter website open and click a button through the code – Min Andy Choi Mar 18 '20 at 06:25

Cannot Add Event Listener

3 Answers3

The reason that you did not got any exception :

Security Risk

Examples

Disabling same-origin policy in your browser