vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決

更新時(shí)間：2022年12月09日 14:43:37 作者：風(fēng)如也

這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue內(nèi)嵌iframe的src更新頁(yè)面未刷新

vue中，系統(tǒng)使用iframe內(nèi)嵌了其他系統(tǒng)的頁(yè)面，iframe的src修改了，但是iframe內(nèi)部頁(yè)面內(nèi)容未更新，也未請(qǐng)求接口。

原因

iframe的src中如果帶hash #，src改變是不會(huì)刷新的。

解決

方式一：可以在 # 號(hào)前加一個(gè)隨機(jī)數(shù)或者時(shí)間戳，但這種方式會(huì)改變url；方式二：在組件上加key，強(qiáng)制刷新頁(yè)面。

方式一：

this.url= `https://xxxx/xxxxx${new Date().getTime()}/#/${val.params.url}`

方式二：

<template>
  <div>
    <iframe
      :key="key"
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "",
      key: new Date().getTime()
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.key = new Date().getTime()
        this.url= `https://xxx/xxx/#/${val.params.url}`
      },
      immediate: true,
    },
  },
}
</script>

iframe的src指向的內(nèi)容不刷新的解決方法之一

iframe的src的值發(fā)生改變,才會(huì)刷新iframe里面的內(nèi)容.

<iframe :src="baseUrl" height="100%" frameborder="0" scrolling="auto" width="100%"></iframe>

this.baseUrl = this.baseUrl + ?`&time=${new Date().getTime()`

給url后面通過(guò)問(wèn)號(hào)傳值，傳一個(gè)當(dāng)前時(shí)間, 這個(gè)值并沒(méi)有其他用處，只是為了改變src的值。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)側(cè)邊定位欄
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊定位欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問(wèn)題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue v-for循環(huán)出來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定值問(wèn)題
這篇文章主要介紹了vue v-for循環(huán)出來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
又一款MVVM組件構(gòu)建自己的Vue組件（2）
這篇文章主要為大家分享了一款MVVM組件，構(gòu)建自己的Vue組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue.js中$refs{}如何獲取DOM元素
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法
這篇文章主要介紹了mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue 父組件通過(guò)$refs獲取子組件的值和方法詳解
今天小編就為大家分享一篇vue 父組件通過(guò)$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
關(guān)于Vue Webpack2單元測(cè)試示例詳解
這篇文章主要給大家介紹了關(guān)于Vue Webpack2單元測(cè)試的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08