Window.open заблокирован решением браузера

При разработке проекта ajax-запрос должен быть выдан после нажатия кнопки, и после завершения запроса появится новая страница окна.Естественно думать об использовании window.open, но он будет перехвачен браузером.

анализировать

Когда браузер обнаруживает новое всплывающее окно, не вызванное действием пользователя, он блокирует его. Потому что браузер считает, что это может быть реклама, а не страница, которую пользователь ожидает увидеть.

когдаwindow.openОн не будет перехвачен при срабатывании события для пользователя или при загрузке, как только код всплывающего окна будет переведен в ajax или асинхронный код, он будет перехвачен сразу.

Перехваченный пример кода

Например, будет перехвачен следующий код:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{{msg}}</h3>
    <button ref='btn' type="button" @click="clickHandler">click</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  data () {
    return {
      url: 'http://www.baidu.com/',
    }
  },
  mounted () {
    setTimeout(() => {
      window.open(this.url, '_blank')
    }, 100)
  }
}
</script>

решение

1. Код для открытия нового окна привязан к обратному вызову события клика, что позволяет избежать перехвата всплывающего окна большинством браузеров:

Следующий пример код:

Открытие нового окна в функции обратного вызова clickHandler, вызванное событием нажатия кнопки, не будет перехвачено браузером.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{{msg}}</h3>
    <button ref='btn' type="button" @click="clickHandler">click</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  data () {
    return {
      url: 'http://www.baidu.com/',
    }
  },
  mounted () {
    
  },
  methods: {
    clickHandler () {
      window.open(this.url, '_blank')
    }
  }
}
</script>

2. Реализовано через отправку формы (протест, будет перехвачен)

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{{msg}}</h3>
    <form action="http://www.baidu.com" ref="form" method="get" target="_blank" style="display: none"></form>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  data () {
    return {
      url: 'http://www.baidu.com/',
    }
  },
  mounted () {
    setTimeout(() => {
      this.$refs.form.submit()
    }, 1000)    
  },
  methods: {

  }
}
</script>

Измените приведенный выше код,formСобытия, представленныеbuttonкнопкаclickЕсли событие сработает, оно не будет перехвачено браузером.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{{msg}}</h3>
    <form action="http://www.baidu.com" ref="form" method="get" target="_blank" style="display: none"></form>
    <button type="button" @click='clickHandler'>button</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  data () {
    return {
      url: 'http://www.baidu.com/',
    }
  },
  mounted () {},
  methods: {
    clickHandler () {
      this.$refs.form.submit()
    }
  }
}
</script>

3. Сначала всплывающее окно, затем перенаправление (оптимально)

Сначала откройте страницу по щелчку пользователя (должен запускаться по щелчку пользователя), а затем перенаправьте страницу

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3>{{msg}}</h3>
    <button ref="btn" @click="clickHandler">button</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: {
      required: true,
      type: String
    }
  },
  data () {
    return {
      url: 'http://www.baidu.com/',
      newTab: null
    }
  },
  mounted () {},
  methods: {
    clickHandler () {
      this.newTab = window.open('about:blank')
      let $ajax = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })   
      $ajax.then(() => {
        this.newTab.location.href = this.url
        setTimeout(() => {
          this.newTab = null
        }, 1)
      })
    }
  }
}
</script>