iframe dans le composant Vue s'ouvre dans un nouvel onglet (Safari uniquement) ----- parfois
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>