0

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?

Min Andy Choi
  • 3
  • 5

3 Answers3

1

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

AyushKatiyar
  • 1,000
  • 8
  • 15
  • 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
0

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

bojue
  • 52
  • 4
0

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

AKT
  • 942
  • 6
  • 16
  • 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