iframe vue 宽度_vue 如何自适应调整嵌入的 iframe 的大小,让用户完全感觉不出有 iframe 这个东西?...
如题,vue 开发目前遇到一个困难,需求背景大概是这样,vue 框架搭的前端,里面需要做个介绍页面,只要有展示功能即可,所以可以是纯静态的。后端程序员写前端苦手,设计网页更别提,遂咨询 V2 老哥,如何快速把网上模板扒到 vue 框架里面。老哥表示扒个几把,直接把网上扒下来的东西跑起来然后 iframe 塞到 vue 里就行了,我表示惊为天人于是从 html 模板网上随便拉了个好看的模板,嵌入 v
如题,vue 开发目前遇到一个困难,
需求背景大概是这样,vue 框架搭的前端,里面需要做个介绍页面,只要有展示功能即可,所以可以是纯静态的。后端程序员写前端苦手,设计网页更别提,遂咨询 V2 老哥,如何快速把网上模板扒到 vue 框架里面。老哥表示扒个几把,直接把网上扒下来的东西跑起来然后 iframe 塞到 vue 里就行了,我表示惊为天人
于是从 html 模板网上随便拉了个好看的模板,嵌入 vue,确实是能跑起来。而我对效果有一个希望是,希望这个 iframe 在用户端的表现跟一个原生的 vue componet 一样(由于没有互动,主要体现在响应式方面)。我希望用户使用中完全感受不到这里是 iframe 嵌入的。
具体来说分解出来应该有三个需求
1 、iframe 嵌入某个链接地址,这个 iframe 的高度应该跟该链接的源页面的高度完全相等。
2 、这个 iframe 不能带有滚动条,整个页面的滚动应该由主页面滚动条完成。
3 、这个 iframe 的高度应该随窗口变化自适应变化。(源页面由 jquery 完成,本身有响应式功能)
================================================ 分割线
需要根据窗口大小变化自适应的话,很自然的想到了 window.onresize = () => {} 这种东西
于是写了这段代码
// 省略一些不重要内容
export default {
mounted(){
let that = this
window.onresize = () => {
let ifdoc = that.$refs.main_page_iframe.contentDocument
let cHeight = Math.max(ifdoc.body.clientHeight, ifdoc.documentElement.clientHeight)
let sHeight = Math.max(ifdoc.body.scrollHeight, ifdoc.documentElement.scrollHeight)
that.$refs.main_page_iframe.style.height = Math.max(cHeight, sHeight) + 'px'
}
}
}
目前问题:iframe 确实能够填满整个页面,并且在用户窗口大小改变的时候(比如当用户窗口变窄,根据原始页面响应式设计,该页面应该会变长),此时 vue 的 iframe 也确实会变高。但是如果之后再将用户窗口变宽,原始页面会变窄,但 iframe 高度却不会缩回。已经目视到页面变短的效果发生,但函数中 cHeight 和 sHeight 的值不会变化。
已经懵逼,有人拯救吗?
更多推荐
所有评论(0)