-
1. iframe嵌套页面高度自适应
iframe对seo很不友好，一般不建议插入这个标签，如果过度使用容易导致网站被惩罚
2. iframe自动适应高度
网页设计上框架高度设置
可以使用css来定义宽度和高度
1.src:表示的是你引入的哪个文件
2.style里面的是你要控制的哪些属性
3.比如宽度width，高度height;分别设置你需要的值就可以了
<iframe src ="/index.html" style="width:400px;height:300px"></iframe>
3. iframe的高度自适应
解决iframe高度自适应
原因
iframe的高度不会随着页面高度的变化而变化，可能会导致页面显示不全，或者页面下方有空白的问题。
第一种方法
这个方式更适用于嵌套的页面，当嵌套多个iframe时，比如左侧有个侧边栏，右侧是个大的iframe，这个大的iframe又嵌套了一层：中间是iframe，但是右侧又有个侧边栏，这时候不想让iframe单独滑动（避免页面出现两个滚动条），而是想整个页面一起滑动时，用这个方法。
html代码： 注意一定要写height=‘100%’ scrolling=‘no’ width='100%'
否则iframe会自己滑动
第二种方法
这个方法更简单些，适用于左侧有个侧边栏，右侧是iframe，并且iframe可以自己滑动，只在页面高度变化时重新赋值即可。
4. iframe嵌套内网页自适应
让iframe自适应浏览器的高度和宽度的具体步骤如下：
1、首先设置样式：body{margin:0; padding:0;}。
2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。html代码如下：<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>。
3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就不出来了，也就是本文开头讲的。需要再次刷新，那就不属于自适应了。代码是：
var ifm= document.getElementById("myiframe");
5. 设置iframe 高度自适应内容
可以的，
代码示例：
<template>
<div id="app">
<iframe
:width="searchTableWidth"
:height="searchTableHeight"
v-bind:src="reportUrl"
></iframe>
</div>
</template>
<script>
import Vue from 'vue'
export default {
methods: {
widthHeight() {
this.searchTableHeight = window.innerHeight -146;
this.searchTableWidth = window.innerWidth - 280
},
},
data() {
return {
reportUrl: '',
searchTableHeight: 0,
searchTableWidth: 0
}
},
mounted() {
window.onresize = () => {
this.widthHeight(); // 自适应高宽度
};
this.$nextTick(function () {
this.widthHeight();
});
},
created() {// 从路由里动态获取 url地址 具体地址看libs下util.js里的 backendMenuToRoute 方法
this.reportUrl = this.$route.meta.pathUrl
},
watch: {
'$route': function () {// 监听路由变化
this.reportUrl = this.$route.meta.pathUrl
}
}
}
</script>
6. iframe内嵌页面等比例缩小
在一个html页面中嵌入多个iframe并实现table样式布局可以通过： 1.设置iframe的rows和cols将这个iframe设置成多少列，行，我这里上代码，
需要注意的是：必须都写在body 的前面，不然无法设置。