需求

項目需要做一個可視化大屏，要的時間比較急，在查找大屏模板的時候找到了合適的一個靜態(tài)的HTML+JS+CSS的一個模板，但是這個模板沒有數據請求等工具方法，于是現在想要把這個html文件放在vue項目中，并且通過vue獲取數據，把數據傳到html頁面，在頁面內展示數據。

實現

首先，在項目的public文件夾下創(chuàng)建新文件夾（我創(chuàng)建的名字是bigdata）,然后將你的html+js+css靜態(tài)資源文件放在該文件夾下。?

在vue的項目中新建一個vue頁面（別忘了創(chuàng)建對應的路由），該頁面通過<iframe>標簽將你的html頁面放在里面，如下：

<template>
  <div class="iframe_box">
    <div
      class="load"
      v-loading.fullscreen.lock="loading"
      element-loading-text="拼命加載中"
    ></div>
    <iframe
      :src="`${publicPath}bigdata/index1.html`"
      width="100%"
      height="100%"
      ref="iframeDom"
    ></iframe>
  </div>
</template>

在這個vue頁面中你需要向后臺請求數據，然后將數據傳給? ?iframe 的那個靜態(tài)頁面。

難點

如何傳遞數據？

html頁面加一個監(jiān)聽message的事件

<script type="text/javascript">
			dataT = {};
			console.log("開始接收函數");
			window.addEventListener('message', (data) => {
				dataT = data.data.total;
				console.log("拿到數據", dataT);
			});
</script>

我的vue頁面拿到數據之后，通過觸發(fā)postMessage方法傳送數據

ps:

contentDocument 屬性能夠以 HTML 對象來返回 iframe 中的文檔。

可以通過所有標準的 DOM 方法來處理被返回的對象。

promise 的 all 方法 詳解

Promise.all() - JavaScript | MDNPromise.all() 方法接收一個 promise 的 iterable 類型（注：Array，Map，Set 都屬于 ES6 的 iterable 類型）的輸入，并且只返回一個Promise實例， 那個輸入的所有 promise 的 resolve 回調的結果是一個數組。這個Promise的 resolve 回調執(zhí)行是在所有輸入的 promise 的 resolve 回調都結束，或者輸入的 iterable 里沒有 promise 了的時候。它的 reject 回調執(zhí)行是，只要任何一個輸入的 promise 的 reject 回調執(zhí)行或者輸入不合法的 promise 就會立即拋出錯誤，并且 reject 的是第一個拋出的錯誤信息。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

mounted() {
    //拿到 這個html文件的dom
    let iframeWin = this.$refs.iframeDom.contentWindow;
    //獲取數據 （我要請求的是很多數據，所以用了promise的all方法包裝了一下）
    //沒有這個需求的話 正常接收數據就行了。
    Promise.all([
      this.getHeadLeft(),
      this.getHeadRight(),
      this.getMIdLeft(),
      this.getMIdMid(),
      this.getBottomRight(),
      this.getBottomMid(),
      this.getBottomLeft(),
    ])
      .then(() => {
        this.loading = false;
        console.log("開始發(fā)送數據");
        iframeWin.postMessage(
          {
            total: this.total,
          },
          "*"
        );
      })
      .catch((e) => {
        console.log(e);
      });
  },

至此，傳送數據成功。

成果

控制臺：

頁面：（數據都是后端拿過來的）

?如果有問題或是可以指導的可以留言討論文章來源地址http://www.zghlxwxcb.cn/news/detail-425296.html

到了這里，關于Vue中引入HTML靜態(tài)資源文件（包含數據的傳遞）（html大屏）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！