Ich habe eine Vue-Komponente, die einen IFrame enthält. Diese Komponente verwendet Vuex-Speicher, um API-Aufrufe durchzuführen, um Informationen über das SSO abzurufen, das in den IFrame geladen wird. Bei der ersten Installation der Komponente wird sie perfekt in den IFrame geladen. Wenn ich jedoch den Bildschirm wechsle und die Komponente erneut installiere, wird SSO in einem neuen Tab geladen. Wenn ich dann zu einem anderen Bildschirm gehe, wird es wieder normal geladen. Daher tritt das Problem mit der neuen Registerkarte nur ab und zu auf, wenn die Komponente installiert ist.

Beachten Sie, dass dieses Verhalten nur in Safari auftritt. Alles andere funktioniert wie erwartet.

Mein Code ist diesem sehr ähnlich. Muss aus proprietären Gründen geändert werden.

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