J'ai un composant Vue qui contient un IFrame. Ce composant utilise le stockage Vuex pour effectuer des appels API afin d'obtenir des informations sur le SSO qui sera chargé dans l'IFrame. La première fois que le composant est installé, il se charge parfaitement dans l'IFrame. Cependant, lorsque je change d'écran et réinstalle le composant, SSO se charge dans un nouvel onglet. Ensuite, si je vais sur un autre écran, il se charge à nouveau normalement. Ainsi, le problème du nouvel onglet ne se produit que de temps en temps lorsque le composant est installé.

Notez que ce comportement ne se produit que dans Safari. Tout le reste fonctionne comme prévu.

Mon code est très similaire à celui-ci. Doit être modifié pour des raisons de propriété.

<template>
  <div>
  <form
    :action="endPoint"
    target="the_iframe"
    ref="ssoForm"
    method="POST"
    name="ssoForm"
    id="ssoForm"
  >
    <input
      id="AuthCode"
      type="hidden"
      name="AuthCode"
      :value="authorizationCode"
    />
    <input
      id="AuthAppUrl"
      type="hidden"
      name="AuthAppUrl"
      :value="authAppUrl"
    /> 
    
  </form>
  <iframe
      width="100%"
      name="the_iframe"
      height="300"
      style="display: flex"
      id="the_iframe"
      frameborder="0"
    ></iframe>
  </div> 
</template>

<script>
import types from "path/to/types"
export default {
  data() {
    return {
      endPoint: null,
      authorizationCode: null,
      authAppUrl: null,
      errorStatus: false,
      error: null
    }
  },
  methods: {
    async getSSOModel() {
      try {
        var data = await this.$store.dispatch(
          `store/${types.GET_SSO_MODEL}`
        )
        this.endPoint = data.endPoint
        this.authorizationCode = data.authorizationCode
        this.authAppUrl = data.authAppUrl 
        await this.$nextTick()
        this.$refs.ssoForm.submit()
      } catch (error) { 
        this.error = error
        this.errorStatus = true
      }
    }
  },
  async mounted() {
    await this.getSSOModel()
  }
}
</script>