Vue中嵌套iframe,将要嵌套的文件放在static
文件夹中:
<iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe>
src
可以使用相对路径,也可使用网页路径等:
<iframe src="https://www.baidu.com/" width="300" height="300" frameborder="0" scrolling="auto"></iframe>
- 在
Vue
+ElementUI
+iframe
实现在当前页面中嵌入另一个HTML页面:
<template>
<div>
<iframe src="http://0.0.0.0:8080" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:80px;left: 120px;"></iframe>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted(){
/**
* iframe-宽高自适应显示
*/
function changeMobsfIframe(){
const mobsf = document.getElementById('mobsf');
const deviceWidth = document.body.clientWidth;
const deviceHeight = document.body.clientHeight;
mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
}
changeMobsfIframe()
window.onresize = function(){
changeMobsfIframe()
}
},
}
</script>
scrolling="no"
表示不显示滚动条style="position:absolute;top:80px;left: 120px;"
表示嵌入的iframe位置距离浏览器顶部80px,距离浏览器左侧120px,刚好是我的侧边栏和顶部导航栏的宽度mounted()
中的方法在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。包括调整页面的高和宽changeMobsfIframe
为自适应宽高的方法,分别在第一次页面加载和调整浏览器大小(onresize ()
)时被调用