javascript - 在 Vue.js 中插入响应式 iframe 的 javascript 代码

Question

我需要将在图表平台上创建的一些 iframe 集成到我的 Vue.js 应用程序中。响应式 iframe 的代码由一些 html 代码(我将其放入模板中)和一些位于一对脚本标记之间的 javascript 组成。

这是 html 部分:

<iframe
  id="datawrapper-chart-8dfPN"
  src="//datawrapper.dwcdn.net/8dfPN/4/"
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  style="width: 0; min-width: 100% !important;" height="400"
>
</iframe>

和 JavaScript 部分:

<script type="text/javascript">
  if("undefined"==typeof window.datawrapper)window.datawrapper={};
  window.datawrapper["8dfPN"]={},
  window.datawrapper["8dfPN"].embedDeltas={"100":481,"200":427,"300":400,"400":400,"500":400,"700":400,"800":400,"900":400,"1000":400},
  window.datawrapper["8dfPN"].iframe=document.getElementById("datawrapper-chart-8dfPN"),
  window.datawrapper["8dfPN"].iframe.style.height=window.datawrapper["8dfPN"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["8dfPN"].iframe.offsetWidth/100),100))]+"px",
  window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("8dfPN"==b)window.datawrapper["8dfPN"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});
</script> 

我不明白如何管理这段代码。如果我把它放在模板中(因为它有 html 元素)， View 会告诉我不能在模板中使用脚本。但是将代码嵌入到我的 Vue 文件部分也不起作用。我试图摆脱这些元素。但这不起作用。

有没有办法重构这段代码，以便我可以将它完全与 Vue.js 一起使用？

Answer 1

如果您查看所提供的 JavaScript，您会发现实际上并没有太多内容。它设置初始高度，然后设置事件监听器来管理 iframe 的高度。

首先，我们将height绑定(bind)到数据属性iframeHeight。

<iframe
  ref="chartiframe"
  id="datawrapper-chart-8dfPN" 
  src="//datawrapper.dwcdn.net/8dfPN/4/"
  scrolling="no"
  frameborder="0"
  allowtransparency="true"
  style="width: 0; min-width: 100% !important;"
  :height="iframeHeight"></iframe>

然后

1. 为 embeddedDeltas 创建 const 变量
2. 设置 mounted Hook 中的初始高度。
3. 在 mounted Hook 中设置 message 事件监听器
4. 创建一个方法来处理调整大小
5. 删除 beforeDestroy Hook 中的事件监听器

ddd

const DELTAS = {
        "100":481,
        "200":427,
        "300":400,
        "400":400,
        "500":400,
        "700":400,
        "800":400,
        "900":400,
        "1000":400,
};

export default {
  data() {
    return {
      iframeHeight: '0px', // initial height
    };
  },
  computed: {
    // Necessary for initial iframe height
    iframeOffsetWidth() {      
      return this.$refs['chartiframe'].offsetWidth;
    },
  },
  mounted() {
    // set initial iframe height
    this.iframeHeight = `{DELTAS[Math.min(1e3,Math.max(100*Math.floor(this.iframeOffsetWidth/100),100))]}px`;
    // setup event listener
    window.addEventListener('message', this.handleIframeResize);
  },
  beforeDestroy() {
    // destroy event listener
    window.removeEventListener('message', this.handleIframeResize);
  },
  methods: {
    handleIframeResize(e) {
      for(var b in e.data['datawrapper-height']) {
        if ('8dfPN' === b) {
          this.iframeHeight = `${e.data['datawrapper-height'][b]}px`;
        }
      }
    },
  },
};