Dynamically open new link but browser problem to open new tab in chrome

Question

I am facing browser blocking problem to open new tab

My code are as below:

<div id="app">
  <a :href="url" target="_blank">Open Link</a>

</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
const app = Vue.createApp( {
  data() {
    return {
      url: 'https://example.com'
    };
  }
});

app.mount('#app')

function onDynamicTab(){
   document.querySelector('a').click();
}

// created
onDynamicTab();

</script>

I need to open dynamically link in new tab.

Check my browser icon on top write below:

Answer 1

The general rule is that popup blockers will engage if window.open or similar is invoked from javascript that is not invoked by direct user action. That is, you can call window.open in response to a button click without getting hit by the popup blocker, but if you put the same code in a timer event it will be blocked. Depth of call chain is also a factor - some older browsers only look at the immediate caller, newer browsers can backtrack a little to see if the caller's caller was a mouse click etc. Keep it as shallow as you can to avoid the popup blockers.