3

I want to open the page link in a new tab after Axios response success, I have googled the solution about it but the browser keeps blocking popup. I have tried the below one but not getting work and not supported in all browsers

let newTab = window.open(); newTab.location.href = url;

2
  • are you using adblocker? Commented Jul 2, 2021 at 9:38
  • no extensions I have installed Commented Jul 2, 2021 at 9:41

4 Answers 4

2

_blank can help you opening new window. check out the documentation of window.open function on w3school. https://www.w3schools.com/jsref/met_win_open.asp

But for security reasons, browsers block such pop-ups. This is a default and desired behaviour from user security point of view. You can override this setting using below solution. https://blog.getadblock.com/how-to-disable-pop-up-blockers-in-every-browser-a1cccbae53e7

Sign up to request clarification or add additional context in comments.

Comments

0

You could specify it as the second parameter with _blank value:

let newTab = window.open(url,'_blank');

Comments

0

@Dhruti if all else fails you can still have a button click trigger the new tab, just make th button hidden and trigger a click action with JavaScript. Give the button an id or ref="somename" in Vue, and a class. Set it's opacity: 0; and position it somewhere on the page where it's unnoticed. You could even set position: relative; (or absolute/fixed) and give it a z-index: 0; or -1, and then after your axios response, call this.$refs.hiddenButton.click() making sure that you've set target="_blank" on the button.

*tip,
target="_blank" will open a new tab each time that element is clicked.
target="blank" (with no underscore) will open a new tab the first time, and then reuse that tab on each subsequent click.

Comments

0

In Composition API, it is necessary to create a handler function to get window browser object.

<script>
const handleOpenLinkInNewTab = () => {
  // window object is visible here
  window.open('http://google.com', '_blank')
}
</script>

<template>
  <div @click="handleOpenLinkInNewTab">
    <ArrowTopRightOnSquareIcon class="h-4" /> 
  </div>
</template>

Note: In this next example window is undefined

<template>
  <div @click="() => window.open('http://google.com', '_blank')">
    <ArrowTopRightOnSquareIcon class="h-4" /> 
  </div>
</template>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.