Vue 구성 요소의 iframe이 새 탭에서 열립니다(Safari에만 해당) ----- 때때로

Question

IFrame이 포함된 Vue 구성 요소가 있습니다. 이 구성 요소는 Vuex 저장소를 사용하여 API 호출을 수행하여 IFrame에 로드될 SSO에 대한 정보를 가져옵니다. 구성 요소가 처음 설치되면 IFrame에 완벽하게 로드됩니다. 그러나 화면을 전환하고 구성요소를 다시 설치하면 SSO가 새 탭에 로드됩니다. 그런 다음 다른 화면으로 이동하면 다시 정상적으로 로드됩니다. 따라서 새 탭 문제는 구성 요소가 설치될 때 가끔씩만 발생합니다.

이 동작은 Safari에서만 발생합니다. 다른 모든 것은 예상대로 작동합니다.

내 코드는 이것과 매우 유사합니다. 독점적인 이유로 수정되어야 합니다.

<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

결국 구성요소를 한 단계 더 끌어올렸습니다. 경로가 변경될 때마다 구성 요소가 다시 로드/설치됩니다. 한 번만로드하면되도록 옮겼습니다. 이는 수정보다는 해결 방법에 더 가깝지만 작동합니다.