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

我最终将组件提升了一个级别。每当路线改变时，组件就会重新加载/安装。我把它移了上去，所以它只需要加载一次。这似乎更像是一种解决方法，而不是修复，但它确实有效。