React.js:如何连续多次运行window.open()?

时间:2018-08-13 11:06:12

标签: javascript reactjs

我使用一些状态变量来确定应该通过单击一个按钮在新标签页中打开哪些网站(如果无法使用标签页,则可以在新窗口中打开)。但是,window.open()仅打开第一个链接。

在这段代码中,我尝试将目标站点推送到数组,并在数组项上运行.forEach和.map。

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

在两种情况下,facebook均加载到新选项卡中。这是第一个数组项。

然后我尝试添加setTimeout来查看是否有一些时间空间可能会影响事情。不,仍然只有Facebook。

然后我尝试在每个功能中仅测试一个站点:

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

在这种情况下,Twitter已打开。首先列出了twitter功能。

有人知道是什么原因导致window.open()无法多次启动?以及如何克服这个限制?

2 个答案:

答案 0 :(得分:1)

你不能。

浏览器仅允许从给定的用户交互触发单个窗口。

这是一项安全功能,可防止网站使用大量新窗口轰炸用户。

答案 1 :(得分:0)

jsFiddle在这里-https://jsfiddle.net/523bLxf4/12/

尝试使用name的{​​{1}}参数。我能够打开多个窗口。

尝试使用window.open代替window.open(social_media_site);

window.open(social_media_site, social_media_site);参数中,使用一些标记来唯一标识窗口。