HTML で適応性の高い iframe フレームネストを使用する

遭遇した問題: 他の人が Web ページを作成するのを手伝うとき、使用できるのは js、css、htm だけであることが強調されます。私が書いているときに、ナビゲーション バーをクリックしてジャンプしたときにページの一部だけを変更したいので、iframe を使用して Web ページをネストしようと考えましたが、問題が発生しました。ネストされた Web ページは適応性が高くないため、コンテンツの一部しか表示されません。この記事はすべてこの問題を解決するために使用されます

---

ヒント: 以下はコードの一部です。スタイルは表示されません。

原理

js を使用して iframe の内部コンテンツの高さを取得し、その値を iframe タグに代入して iframe タグの高さを変更します
。

    <!--导航栏-->
    <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>

コードを変更する

インデックス.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)
}