Launching numerous websites in separate browser tabs using the window.open function

I have a code snippet that opens one tab pointing to a website, but I need it to open two. For example: www.google.com and www.yahoo.com

Currently, it only works with one site in the code:

window.open("https://www.google.com");

but not when both URLs are included:

window.open("https://www.google.com");
window.open("https://www.yahoo.com");

Can anyone advise on how to modify the code to make it open tabs for both sites?

(function() {
  document.getElementById("btnAsync").addEventListener('click', makeRequest);

  function makeRequest() {
    var httpRequest = new XMLHttpRequest(); // Initiatlization of XMLHttpRequest
    if (!httpRequest) {
      alert(' Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          alert(httpRequest.responseText);
        } else {
          alert('There was a problem with the request.');
        }
      }
    };

    window.open("https://www.google.com");
    window.open("https://www.yahoo.com");
  }
})();
<button id="btnAsync" type="button">Click Me</button>

Answer №1

After running the code, I noticed that both websites were able to open successfully. However, a popup window was blocked by the browser before it could fully load, requiring manual permission to proceed. Make sure to test your code thoroughly and remember to grant permission for popups to appear after clicking the button.

Answer №2

In the past, there was a common issue with malicious websites causing browsers to go into an infinite loop of new windows by utilizing a technique known as forking.

To combat this, measures were put in place to only allow new windows or tabs to be opened when triggered by a user action (such as a click) and limited to opening just one window at a time.

While some browsers may ask for permission to open an additional window, websites are unable to bypass this crucial security feature.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The content located at “http://localhost:3000/public/static/” was restricted because of a mismatch in MIME type (text/html) which triggered the X-Content-Type-Options:nosniff protocol

https://i.stack.imgur.com/7Etn7.png Every time I try to run the server with nodemon, I keep encountering the error mentioned in the title. Below is the code snippet from the JavaScript file: const express = require('express') const path = requir ...

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

How can I identify the main text of a specific <MenuItem/> component in ReactJS Material-UI?

I've been working with the Material-UI Dropdown Menu component and I'm trying to figure out how to console log the primaryText of the selected <MenuItem/>. Can anyone provide guidance on how to achieve this? ...

Make the card change to gray when clicked using Bootstrap

Is it possible to achieve a common function in an infinite list using HTML, CSS, JS, jQuery (on the user's side) where an item will be grayed out after being clicked? How can we implement this effect? 1.) When the user clicks on the card element htt ...

Oops! The Route post function is missing some necessary callback functions, resulting in an undefined object error

I need to verify if a user has admin privileges. Every time I try calling the verifyAdminUser function from my router, I encounter the following error: Error: Route.post() requires callback functions but got a [object Undefined] at Route.(anonymous func ...

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

Is it possible to utilize the same Context in multiple forms within React?

Is it possible to utilize React Context to store the state of multiple forms, or should each form have its own unique Context? Below is a snippet of code that showcases the use of React Hooks API: In FormContext.js ... import {FormReducer} from './ ...

Error: The Vuex store is not defined in the Vue.js component when attempting to access it using

I've recently set up a new vue-cli webpack project with Vuex. I have initialized my Vuex store in store.js like so: import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: {} }); export default store; ...

What could be causing my Apollo useLazyQuery to be triggered unexpectedly within a React hook?

import { useLazyQuery } from '@apollo/client'; import { useEffect, useState } from 'react'; import { ContestSessionResponseInfoObject, GetSessionDocument, HasAccessToRoundDocument, } from '@/graphql/generated/shikho-private- ...

The HTTP.GET method seems to be malfunctioning

I'm having some trouble loading an image from a HTTP.GET request into my application. The picture just won't seem to display correctly. Any suggestions on what might be causing this issue? Below is the code I am using: HTML: <ion-view view- ...

Having trouble understanding why my submission button isn't working

I'm struggling to understand why my submit button isn't working correctly. Initially, I had an e.preventDefault() at the beginning and it didn't have any effect. However, after receiving advice from an instructor, I included it in the condit ...

Accessing a Child Component Function in Material UI

Utilizing the Material UI framework, I am constructing an application with React. Included in this application is a Dialog feature that permits users to modify various information about an object (referencing the code below). The dialog consists of two but ...

Having trouble figuring out what is causing non-serializable error in Redux (Redux error)

Initially, my react-native application was functioning smoothly and this particular page (screen) had been developed and working perfectly. However, out of the blue, it has started to encounter an error related to non-serializable data in the 'save_re ...

Troubleshooting a Simple JavaScript Game: Mastermind Edition

Currently, I am working on a JavaScript version of the well-known board game "Mastermind". I have been facing some fundamental issues, mainly with JavaScript arrays and how to reference their values or elements. Despite spending quite a bit of time trying ...

Execute the cucumber tests based on tags or run all the tests

I am facing challenges when it comes to running cucumber tests. I aim to execute either all scenarios if tags are not provided as a CLI argument, or specific scenarios based on the passed tags as CLI arguments. Here is my configuration file: module.exports ...

How to Deactivate the Default Selection in React-Select

Having trouble with the focus in a React Select dropdown. The first item always gets focused when opening the dropdown, despite passing various props without success. I checked their GitHub for related issues around autofocus but couldn't find a solut ...

Database only accepts numerical data for insertion, rejecting any characters or alphanumeric entries

On a webpage, I have an input field through which I am passing the value into an ajax POST request. After logging everything in my JavaScript file and confirming that all is working as expected. In my PHP file, I retrieve the input value using $message = ...

Issue with page scrolling while utilizing the Wow.js jQuery plugin

While using the Wow.js plugin for scroll animations, I encountered an issue on mobile phones. When reaching the Pricings section, scrolling becomes impossible for some reason. I am utilizing Bootstrap 3 in this project. Despite attempting to modify the an ...

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

Tips for concealing the body description on the homepage of a blogger website

I want to conceal this description This is my blog and I am facing an issue where I need to hide the description on the home page. I have tried using color:white which worked initially, but when I moved the description to the top or left, the black backgro ...