Vueを使用して統合されたIframeページを実装する方法

この記事では、主に Vue を Iframe ページに組み込む方法の例を紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

1. プロジェクトの要件

いくつかの機能ページは以前は JSP ページを使用して書かれていたため、管理システムは Vue とこれらの両方をサポートする必要があります。公開後の jsp ページ

もう 1 つは、タブを元に戻すと、以前に入力した内容がまだ存在することです

システム ページのスクリーンショット

2. この問題に向けて、私たちの当初の実装のアイデアは、iframe の共通コンポーネントを作成し、異なる http ページの URL を渡して切り替えることでしたが、これでは vue のルートを切り替えてから切り替える限り、2 番目の点を満たさないことがわかりました。 http ページに戻ると、iframe の src 属性を持つページが更新されます。このままでは仕方がないので、次のような実装アイデアを考えます

ルーターと同じレベルに iframeTemp コンポーネントを追加しました。 -vue のビュー 実際には、elementUI のタブ コンポーネントであり、メニュー バーの下にあるタブ コンポーネントのヘッダー スタイルを非表示にします

ifram コンポーネントの表示、非表示、タブの切り替えはすべてユニバーサル vuex によって実装されています。とバスイベントのブロードキャスト

<template>
 <!--路由渲染的功能模块区域-->
 <p class="router-out-content">
  <!--缓存部分页面的写法-->
  <keep-alive>
   <router-view v-show="!showIframe" class="position router-content" v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-show="!showIframe" class="position router-content" v-if="!$route.meta.keepAlive"></router-view>
  <!--兼容系统外部页面-->
  <iframe-temp v-show="showIframe"></iframe-temp>
 </p>
</template>
<style scoped lang="scss">
 .position {
  position: relative
 }

 .router-out-content {
  position: static;
 }
</style>
<script>
import { mapState } from &#39;vuex&#39;
import iframeTemp from &#39;@/containers/main/IframeTemplate.vue&#39;
export default {
 data() {
  return {}
 },
 components: {
  iframeTemp
 },
 computed: {
  ...mapState([
   &#39;showIframe&#39;
  ])
 }
}
</script>

rreerreeee

アンカーを変更する必要があるため、無駄なルートも追加する必要があります

/*
 * IframeTemplate.vue组件的内部
 **/

 <template>
 <!--iframe页面展示区域-->
 <p id="fwIframe">
  <!--<Tabs class="full temporary-tabs" v-model="store.state.iframeSelectTab" type="card">-->
  <Tabs class="full temporary-tabs" :value="iframeSelectTab" type="card">
   <TabPane
    v-for="(item, index) in iframeTabData"
    :key="item.tag"
    :label="item.name"
    :name="item.tag"
   >
    <iframe :key="item.tag" v-once :src="item.url" frameborder="0"></iframe>
   </TabPane>
  </Tabs>
 </p>
</template>
<style lang="scss">
 #fwIframe {
  /*测试位置的时候显示这段--开始*/
  /*width: 100%;*/
  /*height: 100%;*/
  /*background-color: red;*/
  /*display: block !important;*/
  /*测试位置的时候显示这段--结束*/
  position: absolute;
  left: 0;
  right: 0;
  top: 45px;
  bottom: 0;
  z-index: 5000 !important;
  .el-tab-pane {
   height: 100%;
   width: 100%;
   iframe {
    /*height: auto;*/
    min-height: 600px;
    /*height: calc(100% - 45px);*/
    width: 100%;
   }

  }
  .full {
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
  }
 }
</style>
<script>

 // selectTabCode=>iframeSelectTab
 // tabsList=>iframeTabData
 import {mapState} from &#39;vuex&#39;
 import * as mainConst from &#39;@/store/mainConst.js&#39;
 export default{
  data(){
   return {
//    tabsList: [],
//    selectTabCode: &#39;&#39;
   }
  },
  computed: {
   ...mapState([
    &#39;iframeTabData&#39;,
    &#39;iframeSelectTab&#39;,
    &#39;navTabData&#39;,
    &#39;systemName&#39;
   ])
  },
  mounted(){
   const _this = this

   // 1、监听添加iframe中tab的广播
   this.$root.bus.$on(&#39;addIframeTab&#39;, function (item) {

    // _this.tabsList.push(item)
    // _this.selectTabCode = item.tag
    _this.$store.commit(mainConst.M_IFRAME_PUSH_TAB, item)
    _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, item.tag)
   })

   // 2、监听切换iframe中tab的广播
   this.$root.bus.$on(&#39;changeIframeTab&#39;, function (tag) {
    _this.$store.commit(mainConst.M_IFRAME_CHANGE_SELECTCODE, tag)

   })
   // 3、监听删除iframe中tab的广播
   this.$root.bus.$on(&#39;deleteIframeTab&#39;, function (obj) {
    // 1、删除iframe中的指定tab页面
    _this.$store.commit(mainConst.M_IFRAME_DELETE_TAB, obj)
    // _this.tabsList = _this.tabsList.filter(tab => tab.tag !== obj.tag)

    // 2、如果删除的一级tab不是当前激活的一级tab，TabsTemeplate中的一级tab删除事件已经在vuex中删除了，不需要做路由跳转操作了
    let index = obj.index
    for (let i = 0; i < _this.navTabData.length; i++) {
     if (_this.navTabData[i].active) {
      return
     }
    }

    // 3、如果删除的一级tab是当前激活的一级tab，
    const con = _this.navTabData[index - 1] || _this.navTabData[index]
    let url = `/${_this.systemName}`
    if (con) {
     // 还有其他的一级tab，就赋值其他的一级tab的url，探后跳转
     url = con.url
     con.active = true

     // 如果还有其他一级的tab,那么还要判断跳转的页面是不是iframe
     if (url.toLowerCase().indexOf("/iframe") == 0) {
      // 如果是iframe页面，显示iframe,广播iframe的切换tab切换事件，路由进行跳转
      _this.$store.commit(mainConst.M_SHOW_IFRAME)
      _this.$root.bus.$emit("changeIframeTab", url.slice(8))

     } else {
      // 如果不是iframe页面，隐藏iframe,路由进行跳转
      _this.$store.commit(mainConst.M_HIDE_IFRAME)
      // _this.$store.commit(mainConst.M_UPDATE_NAVTABDATA, {navIndex: index})
     }
    }
    else {
     // 没有其他的一级tab，直接隐藏iframe，跳首页
     _this.$store.commit(mainConst.M_HIDE_IFRAME)
    }

    _this.$router.push(url)
   })
  }
 }
</script>

/*
 * mainConst.js
 **/


/*****************************getter常量****************************************/
export const G_GET_NAVTABDATA = 'G_GET_NAVTABDATA'

/*****************************mutations常量*************************************/
// 一级tab处理
export const M_PUSH_NAVTABDATA = 'M_PUSH_NAVTABDATA'
export const M_DELETE_NAVTABDATA = 'M_DELETE_NAVTABDATA'
export const M_UPDATE_NAVTABDATA = 'M_UPDATE_NAVTABDATA'

// iframe切换处理
export const M_SHOW_IFRAME = 'M_SHOW_IFRAME'
export const M_HIDE_IFRAME = 'M_HIDE_IFRAME'

// iframe添加，删除，选择处理
export const M_IFRAME_PUSH_TAB='M_IFRAME_PUSH_TAB'
export const M_IFRAME_DELETE_TAB='M_IFRAME_DELETE_TAB'
export const M_IFRAME_CHANGE_SELECTCODE='M_IFRAME_CHANGE_SELECTCODE'

// 设置全局系统变量
export const M_SET_SYSTEMNAME = 'M_SET_SYSTEMNAME'

/*****************************actions常量***************************************/
// export const A_REQUEST_DATA = 'A_REQUEST_DATA'

3. 感想

この iframe との組み合わせは少し嫌ですが、可能です。私たちのアイデアを実現します この機能の実装では、バス イベント バスのブロードキャストとモニタリングを使用しました

実際、ブロードキャストの広範な使用は制御できないため、これについては慎重に検討できます。 vuex を実装するには、この点を使用します。ブロードキャストは本当に怠惰です

1. ブロードキャストは推奨されませんが、適切なシナリオで使用する必要があります。実際、ブロードキャストを使用するのは良くありません。これは拡張に役立ちません。 . どのような展開になるか誰が予想できるでしょうか？

2. 同じような問題が発生した場合は、このアイデアを理解してください

将来的に役立つことを願っています。

関連記事:

vue.jsにインターフェイスデータを保存するためにvuexを呼び出す方法

JavaScriptを使用して数字合わせゲームを実装する方法

データをフォームにカプセル化して送信するプロセス

以上がVueを使用して統合されたIframeページを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。