<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./demo2.html" target="content"> <!-- <iframe name="content" -->
<i class="menu-icon fa fa-caret-right"></i>
页面2
</a>
<a href="./demo3.html" target="content"> <!-- <iframe name="content" -->
<i class="menu-icon fa fa-caret-right"></i>
页面三
</a>
<iframe name="content" id="content" src="./demo1.html" frameborder="0" scrolling="no" width="80%" ></iframe>
<script>
// 根据页面的操作，大小跟随变化
function initIframe() {
var iframe = document.querySelector('#content');
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var heigth = Math.max(bHeight,dHeight);
iframe.height = heigth;
console.log(heigth);
}catch(ex){
console.log('出错');
}
}
window.setInterval('initIframe()',200)
</script>
</body>
</html>
iframeは適応性が高く、タグと連携して1ページにさまざまなインターフェースを表示します
おすすめ
転載: blog.csdn.net/weixin_44797182/article/details/109597030
ランキング