React.js：如何连续多次运行 window.open()？

Question

I use a few state variables to determine which sites should be opened in new tabs (or maybe a new window if tabs aren't possible) with a single button click. However, window.open() only opens the first link.

In this code I tried pushing the target sites to an array and running.forEach and.map on the array items.

open_selected_websites() {
    const sites_to_open = [];

    // check each property for true and array.push if so
    this.final_social_media_site_selections.facebook && sites_to_open.push('http://facebook.com');
    this.final_social_media_site_selections.twitter && sites_to_open.push('http://twitter.com');
    this.final_social_media_site_selections.linkedin && sites_to_open.push('http://linkedin.com');
    this.final_social_media_site_selections.instagram && sites_to_open.push('http://instagram.com');
    this.final_social_media_site_selections.pinterest && sites_to_open.push('http://pinterest.com');

    console.log(sites_to_open); // all observables are true and all sites appear in the array.

    sites_to_open.forEach((social_media_site) => {
        // setTimeout(() => {
            window.open(social_media_site);
        // }, 500)
    })

In both cases, facebook loaded in a new tab. It is the first array item.

Then I tried adding a setTimeout to see if some time space might affect things. No, still only Facebook.

Then I tried testing only one site in each function:

<Button
    size='huge'
    color='orange'
    onClick={ () => {
        // final_edits_store.open_selected_websites();
        final_edits_store.test_to_open_twitter();
        final_edits_store.test_to_open_facebook();

    } }
>
    Copy Text and Open Social Media Sites in New Tabs
</Button>

In this case Twitter opened. The twitter function was listed first.

Does anyone know what is causing window.open() not to fire multiple times? And how to overcome this limit?

Answer 1

You can't.

Browsers only allow a single window to be triggered from a given user interaction.

This is a security feature to prevent websites bombing the user with vast numbers of new windows.

Answer 2

jsFiddle here - https://jsfiddle.net/523bLxf4/12/

Try the name parameter that window.open takes. I was able to open multiple windows.

Instead of window.open(social_media_site); try window.open(social_media_site, social_media_site);

In the name parameter use some tag that uniquely identifies the window.