iframe dalam komponen Vue dibuka dalam tab baharu (Safari sahaja) ----- kadangkala

Question

Saya mempunyai komponen Vue yang mengandungi IFrame. Komponen ini menggunakan storan Vuex untuk membuat panggilan API untuk mendapatkan maklumat tentang SSO yang akan dimuatkan dalam IFrame. Kali pertama komponen dipasang, ia dimuatkan dengan sempurna ke dalam IFrame. Walau bagaimanapun, apabila saya menukar skrin dan memasang komponen semula, SSO dimuatkan dalam tab baharu. Kemudian jika saya pergi ke skrin lain ia dimuatkan seperti biasa semula. Jadi isu tab baharu hanya berlaku sekali-sekala apabila komponen dipasang.

Perhatikan bahawa tingkah laku ini hanya berlaku dalam Safari. Semua yang lain berfungsi seperti yang diharapkan.

Kod saya sangat serupa dengan ini. Mesti diubah suai atas sebab proprietari.

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

Answer 1

Saya akhirnya mengambil komponen itu ke tahap yang lebih tinggi. Setiap kali laluan berubah, komponen dimuat semula/dipasang. Saya mengalihkannya supaya ia hanya perlu dimuatkan sekali. Ini kelihatan lebih seperti penyelesaian daripada pembetulan, tetapi ia berfungsi.