The latest URL is not launching in a separate tab

Question

The latest URL is not launching in a separate tab

Looking for some assistance with this code snippet:

<b-btn
   variant="primary"
   class="btn-sm"
   :disabled="updatePending || !row.enabled"
   @click="changeState(row, row.dt ? 'activate' : 'start')">
   Activate
 </b-btn>

 ...........
 methods: {
    async changeState(channel, newMode) {
      const { id, type } = channel;
      const data = await this.getToken();
      window.open("https://en.wikipedia.org/", "_blank");
      return;
 }

Upon clicking the button, a new tab fails to open.

The issue appears to be related to await this.getToken(). Removing this line of code resolves the problem.

javascript vue.js vuejs2

Answer 1

Answer №1

If the code works without using

const data = await this.getToken();

, it's likely that the browser is blocking it because it doesn't seem to be triggered by a click event (browsers are wary of unexpected popups).

A workaround that may work (it's been successful on Firefox) is to:

async changeState(channel, newMode) {
  let w = window.open("", "_blank");
  const { id, type } = channel;
  const data = await this.getToken();
  w.location.href = "https://en.wikipedia.org/"
  return;
}

In this method, you first open a new window and then modify its URL.

Example: https://jsfiddle.net/xgoavep2/

Answer 2

If the code works without using

const data = await this.getToken();

, it's likely that the browser is blocking it because it doesn't seem to be triggered by a click event (browsers are wary of unexpected popups).

A workaround that may work (it's been successful on Firefox) is to:

async changeState(channel, newMode) {
  let w = window.open("", "_blank");
  const { id, type } = channel;
  const data = await this.getToken();
  w.location.href = "https://en.wikipedia.org/"
  return;
}

In this method, you first open a new window and then modify its URL.

Example: https://jsfiddle.net/xgoavep2/

The latest URL is not launching in a separate tab

Answer №1

Similar questions

divs adjust their size based on how many are placed in a single row

Fade in and out a Div with a distinct class and ID

Closing the video on an HTML5 player using an iPad

Having trouble executing the .map function within the function

Token does not function properly on Fetch request sent to PHP script

Utilize a single array to point to multiple elements

Is there a way to display my current connected clients to a new client using socket.io?

How can we detect line breaks within a selection using JavaScript?

Communication between Angular Controller and Nodejs Server for Data Exchange

JavaScript - Clear the localStorage when closing the final tab of a website

Is there a way to conceal the loading screen until the website has completely loaded?

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

Utilizing JavaScript to Load and Showcase Images from a Temporary Image to imgsrc

Mapping Vue routes to perform redirects

Is it possible for the data submitted in a POST request to be converted into URL parameters?

Having trouble with ES6 in Canvas - why won't my code display correctly?

When you use the useState object in NextJS, the context object may appear to be empty

Pop-up box with hyperlink

Import data from a distant file into a node Buffer within the web browser

Images in Prismic fail to load on Vue website, causing runtime and compiler errors