Rails vuejs 获取 iframe 元素的高度

Question

我正在使用vuejswebpackerrails和turbolinks. iframe我想在初始页面加载时计算元素的正确高度。目前，我在手动刷新页面时获取元素的高度，而当有人从任何其他页面导航到元素所在的页面时，不会iframe计算元素的高度。我的index.js设置：Vue.use(TurbolinksAdapter);document.addEventListener('turbolinks:load', () => {  const app = new Vue({    el: '[data-behaviour="vue"]',  });});我的preview.vue元素iframe所在的位置。data() {    return {      frameHeight: '',    };  },   computed: {    computeHeight() {      this.frameHeight =        this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';    },  },  mounted() {    window.addEventListener('load', () => {      this.computeHeight;    });  },我也尝试用mounted钩子替换created钩子，而不是监听事件load我也尝试监听turbolinks:load事件。但它不起作用。任何帮助，将不胜感激。谢谢。

Answer 1

尝试像这样在 nextTick 中包装计算高度代码：

data() {

    return {

      frameHeight: '',

    };

  },

  mounted() {

    this.$nextTick(() => { 

      window.addEventListener('load', () => {

        this.frameHeight =

          this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';

      });

    })

  },

这应该允许元素在执行代码以获取高度之前加载。

Answer 2

使用 nextTick 时不需要 eventListener。你可以这样做：

data() {

    return {

      frameHeight: '',

    };

  },

  mounted() {

    this.$nextTick(() => { 

      this.frameHeight = 

          this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';

    });

  },