Vue给iframe设置嵌套页面的宽高
Vue给iframe设置嵌套页面的宽高,代码示例如下:
<template> <iframe id="iframe" :height="scrollHeight" :width="scrollWidth" frameborder=0 allowfullscreen="true" src="/docs-html/xxx.html" ref="iframe" scrolling=auto></iframe> </template> <script> export default { data() { return { scrollWidth: 1000, scrollHeight: 1000, } }, methods: { getScrollWidthAndHeight() { let iframe = document.getElementById("iframe"); let doc = iframe.contentDocument || iframe.document; this.scrollWidth = doc.documentElement.scrollWidth; this.scrollHeight = doc.documentElement.scrollHeight + 50; } }, mounted() { var _this = this const iframe = document.querySelector('#iframe') // 处理兼容行问题 if (iframe.attachEvent) { iframe.attachEvent('onload', function () { // iframe加载完毕以后执行操作 console.log('iframe已加载完毕') _this.getScrollWidthAndHeight() }) } else { iframe.onload = function () { // iframe加载完毕以后执行操作 console.log('iframe已加载完毕') _this.getScrollWidthAndHeight() } } } } </script> <style scoped> </style>