Question

我需要在我的Vue.js应用中集成一些在图表平台上创建的iframe。自适应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元素），则视图会告诉我不能在模板中使用脚本。但是将代码嵌入到我的Vue文件的一部分中也不起作用。我试图摆脱这些因素。但这不起作用。

是否有一种方法可以重构此代码，以便可以在Vue.js中完全使用它？

Answer 1

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

首先，我们将height绑定到数据属性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>

然后

为const创建embeddedDeltas变量
在mounted钩中设置初始高度。
在message钩子中设置mounted事件监听器
创建一种方法来处理调整大小
在beforeDestroy钩子中删除事件监听器

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`;
        }
      }
    },
  },
};

在Vue.js中插入用于响应式iframe的JavaScript代码

1 个答案: