iframe in Vue component opens in new tab (Safari only) ----- sometimes

Question

I have a Vue component that contains an IFrame. This component uses Vuex storage to make API calls to get information about the SSO that will be loaded in the IFrame. The first time the component is installed, it loads perfectly into the IFrame. However, when I switch screens and install the component again, SSO loads in a new tab. Then if I go to another screen it loads normally again. So the new tab issue only happens every once in a while when the component is installed.

It should be noted that this behavior only occurs in Safari. Everything else works as expected.

My code is very similar to this. Must be modified for proprietary reasons.

<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

I ended up taking the component up a level. Whenever the route changes, the component is reloaded/installed. I moved it up so it only has to load once. This seems more like a workaround than a fix, but it does work.