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';    });  },