浮云間
2023-02-17 15:50:21
我正在使用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事件。但它不起作用。任何幫助,將不勝感激。謝謝。
2 回答

郎朗坤
TA貢獻1921條經驗 獲得超9個贊
嘗試像這樣在 nextTick 中包裝計算高度代碼:
data() {
return {
frameHeight: '',
};
},
mounted() {
this.$nextTick(() => {
window.addEventListener('load', () => {
this.frameHeight =
this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';
});
})
},
這應該允許元素在執行代碼以獲取高度之前加載。

嗶嗶one
TA貢獻1854條經驗 獲得超8個贊
使用 nextTick 時不需要 eventListener。你可以這樣做:
data() {
return {
frameHeight: '',
};
},
mounted() {
this.$nextTick(() => {
this.frameHeight =
this.$refs.iframe.contentWindow.document.body.scrollHeight + 'px';
});
},
添加回答
舉報
0/150
提交
取消