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

我最終將元件提升了一個等級。每當路線改變時，元件就會重新載入/安裝。我把它移了上去，所以它只需要加載一次。這似乎更像是一種解決方法，而不是修復，但它確實有效。