Блог

У меня есть компонент Vue, который содержит IFrame. Компонент выполняет вызовы API, используя хранилище Vuex, чтобы получить информацию для единого входа, которая будет загружена в IFrame. При первом монтаже компонента он отлично загружается в IFrame. Но когда я переключаю экраны и компонент снова монтируется, единый вход загружается на новой вкладке. Затем, если я перейду на другой экран, он снова загрузится нормально. Таким образом, проблема с новой вкладкой возникает только каждый раз, когда монтируется компонент.

Следует отметить, что такое поведение появляется только в Safari. Работает так, как ожидается, везде.

Мой код очень похож на этот. Пришлось модифицировать по соображениям собственности.

 lt;templategt;  lt;divgt;  lt;form  :action="endPoint"  target="the_iframe"  ref="ssoForm"  method="POST"  name="ssoForm"  id="ssoForm"  gt;  lt;input  id="AuthCode"  type="hidden"  name="AuthCode"  :value="authorizationCode"  /gt;  lt;input  id="AuthAppUrl"  type="hidden"  name="AuthAppUrl"  :value="authAppUrl"  /gt;     lt;/formgt;  lt;iframe  width="100%"  name="the_iframe"  height="300"  style="display: flex"  id="the_iframe"  frameborder="0"  gt;lt;/iframegt;  lt;/divgt;  lt;/templategt;  lt;scriptgt; 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()  } } lt;/scriptgt;  

В итоге я поднял компонент на уровень выше. Компонент загружался/монтировался повторно всякий раз, когда менялся маршрут. Я переместил его вверх, так что он должен был загрузиться только один раз. Это кажется скорее обходным путем, чем исправлением, но это работает.