【HTML】別HTMLを埋め込む(iframe)

作成したHTMLテーブルを別のHTMLファイルに埋め込んで表示させたい!と思ったので、その方法をメモ。

HTMLの埋め込みは、iframe タグで実装できる。
<iframe src='パス/ファイル名.html'></iframe>


試しに前回記事で作ったHTMLテーブルを埋め込んでみる。
【VBA & HTML】ExcelのテーブルをHTML形式に変換する - こちにぃるの日記

HTMLは以下。

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='utf8'>
  <title>Top</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
  <style type='text/css'>  
    #header{
      background-color: #CBFFD3;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 75px;
      border: 5px solid #fff;
    }
    #main_body{
      padding:75px 0 75px;
      top: 75px;
    }
    .side {
      background-color:#FFFFEE;
      width:10%;
      overflow-y: scroll;
      border: 5px solid #fff;
    }
    .fixed{
      position:fixed;
      top:75px;
      width: 300px;
    }
    .content {
      width:90%;
      margin-left:20px;
    }
    article {
      display:flex;
    }
  </style>
  <script type='text/javascript'>
      $(function($) {
        var tab = $('.sidebar'),
        offset = tab.offset();
        $(window).scroll(function () {
          if($(window).scrollTop() > offset.top) {
            tab.addClass('fixed');
          } else {
            tab.removeClass('fixed');
          }
        });
      });
  </script>
</head>
<body>

  <div id='header' style='font-size:30px;'>タイトルXXX</div>
  
  <article id='main_body'>
  
    <div class='side'>
      <div class='sidebar'>
        <p>目次</p>
        <ol>
          <li><a href='#Table1'>テーブル1</a></li>
          <li><a href='#Table2'>テーブル2</a></li>
          <li><a href='#Table3'>テーブル3</a></li>
        </ol>
      </div> 
    </div> 
    
    <div class='content'>
      <hr/>
      <div id='Table1'>■テーブル1</div>
      <iframe width='90%' height='500px' src='./SampleHTMLtable.html' frameborder='0'></iframe>
      <br/>
      
      <hr/>
      <div id='Table2'>■テーブル2</div>
      <iframe width='40%' height='200px' src='./SampleHTMLtable.html' frameborder='0'></iframe>
      <br/>
      
      <hr/>
      <div id='Table3'>■テーブル3</div>
      <iframe width='70%' height='500px' src='./SampleHTMLtable.html' frameborder='0'></iframe>
      <br/>
      
    </div>
    
  </article>
  
</body>
</html>


うまくHTMLテーブルを表示できた。 f:id:cochineal19:20210829160959p:plain

サイドメニューの設定は以下サイト様を参考にさせていただきました。
直帰率改善に!スクロールしてもサイドバーを固定して記事一覧を表示する方法 | イズクル

本ブログは個人メモです。 本ブログの内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。