Tengo un componente Vue que contiene un IFrame. El componente realiza llamadas a la API, utilizando una tienda Vuex, para obtener información para un SSO que se cargará en el IFrame. La primera vez que se monta el componente, se carga perfectamente en el IFrame. Pero cuando cambio de pantalla y el componente se vuelve a montar, el SSO se carga en una nueva pestaña. Luego, si voy a otra pantalla, vuelve a cargar bien. Entonces, el problema de la nueva pestaña solo ocurre cada dos veces que se monta el componente.

Cabe señalar que este comportamiento solo aparece en Safari. Funciona como se espera en cualquier otro lugar.

Mi código es bastante similar a este. Tuvo que modificar por razones de propiedad.

 <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>