Use iframe frame nesting highly adaptive in html

Problems encountered : When helping others to make web pages, I emphasized that only js, css, and htm can be used. When I was writing, I wanted to change only part of the page when I clicked on the navigation bar to jump, so I thought of using iframe to nest the web page, but I encountered a problem. The nested web page cannot be highly adaptive, so that only part of the content is displayed. This article is used to solve this problem

---

Tip: The following is part of the code, the style will not be displayed

principle

Use js to get the height of the internal content of the iframe, and then assign the value to the iframe tag to change the height of the iframe tag
index.html

    <!--导航栏-->
    <div id="nav">
      <ul>
        <li><a class="aLabel" href="#" onclick="toHome()">首页</a></li>
        <li><a class="aLabel" href="#" onclick="toGeographic()">地理气候</a></li>
        <li><a class="aLabel" href="#" onclick="toScenic()">旅游景点</a></li>
        <li><a class="aLabel" href="#" onclick="toHistory()">历史沿革</a></li>
      </ul>
    </div>
    <hr/>
    <!--主体内容-->
    <div id="hc">
        <iframe id="iframe" src="./home.html" scrolling="no" onload="GetIframeStatus()"></iframe>
    </div>

modify the code

index.js

var Timeout;
var iframe
/*页面加载完执行*/
window.onload = function () {
    
    
  iframe = document.getElementById("iframe");
  GetIframeStatus(iframe)
}
/*窗口改变时执行*/
window.onresize = function () {
    
    
  GetIframeStatus(iframe)
}

// iframe高度自适应
function GetIframeStatus(iframe,Height) {
    
    
  Timeout = setTimeout(function () {
    
    
    if (!iframe) return;
    iframe.height = (iframe.Document ? iframe.Document.body.scrollHeight : iframe.contentDocument.body.offsetHeight)
  }, 200)
}

// 跳转到 “首页” 页面
function toHome() {
    
    
  iframe.src = '../html/home.html'
  GetIframeStatus(iframe)
}

// 跳转到 “地理气候” 页面
function toGeographic() {
    
    
  iframe.src = '../html/geographic1.html'
  GetIframeStatus(iframe)
}

// 跳转到 “旅游景点” 页面
function toScenic() {
    
    
  iframe.src = '../html/scenic.html'
  GetIframeStatus(iframe)
}

// 跳转到 “历史沿革” 页面
function toHistory(){
    
    
  iframe.src = '../html/history.html'
  GetIframeStatus(iframe)
}