Question

首先，我知道这很简单，与您一样，我感到困惑，因为我无法自行解决。我没有网络开发背景，需要使用github页面来记录项目。我一直在为此困扰着我很多时间。

问题的症结在于，我试图使用嵌套的iframe，但是每一层我都有另一个滚动条，没有滚动同步。如果我设置scrolling =“ no”，则内容被隐藏。当我在边栏上使用框架时，情况会更加恶化。

Index.html

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader"> 
    <b> My Project Name
    </b>
</div>

<body>

<div class="topnav">
    <a href="overview.html" target="main_body">Overview</a>
    <a href="important_concepts.html" target="main_body">Model Concepts/Patterns</a> 
    <a href="lineage.html" target="main_body">Data Lineage</a>
    <a href="entity_metadata.html" target="main_body">Entity Details</a>
    <a href="jargon.html" target="main_body">Jargon Glossary</a> 
    <a href="examples.html" target="main_body">Example Demos</a>             
</div>

<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. --> 
<iframe name="main_body" src="overview.html" height="100%" width="100%">

</body>
</html>

尝试执行左侧边栏变得更加成问题。看来我只是不了解框架之间如何继承高度。该图显示了边栏如何不断堆叠，并且滚动不完全同步。我尝试将高度提高到100000并隐藏滚动，但随后也消除了水平滚动。

<!DOCTYPE html>
<html>

  <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">    

  <body>

  <div class="container" style="display: flex; height:100%;">
    <div style="display:inline-block;">
      <iframe 
            src="cs_entity_sidebar.html"
            name="cs_entity_sidebar"
            frameborder="0" 
            scrolling="no" 
            width="100%" 
            align="left">
      </iframe> 

    </div>
      <iframe  class="second-row" 
          name="main_overview_content" 
          scrolling = "yes"
          height=10000 
          align="left"
        >
      </iframe>
</div>

</html>

这个站点上的教程几乎是我所需要的，只是一个没有框架的简单布局

https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css

操作摘要：

<div id="main-container">
    <div id="sidebar">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
    </div>
    <div id="content">Content Area</div>
</div>

但是如何获取“内容区域”以使用链接的html填充？当我尝试使用自己的html进行操作时，只是将我带到一个没有顶部导航的单独窗口中。

这个问题也很接近，但是没有涵盖如何使链接和导航正常工作。

此外，我已经在这里阅读了jquery / ajax是更好的方法，但是我在ajax中所做的任何操作都没有效果。我正在使用公司VPN，因此我认为存在一些代理问题。

感谢您的帮助。

编辑：Jquery / Ajax方法不起作用。它不会失败，点击不会执行任何操作。我已经尝试过各种来源，包括google库，但是我看到的是src =“ https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js”我公司的其他项目。

请注意屏幕截图，“上面的内容来自脚本”上方没有任何内容

<html>
<head>

  <!-- load ajax, file can also be loaded locally -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


  <script>
    /* create event handler that loads content into main area when navigation link is clicked */
    $(document).ready(function () {
      $('#link1').click(function(){
        $('#main_body').load('test.html');
      });
    });
  </script>

</head>
<body>

  <div class="mainheader"> 
    <h3>My Project Name</h3>
  </div>

  <div class="topnav">
    <a id="link1">Overview</a>            
  </div>

  <!-- where you want the page to load -->
  <div id="main_body"></div>
  <div>Above is loaded from script</div>
  <div>Below is loaded from a frame</div>
  <iframe src="test.html" ></iframe>  

</body>
</html>

edit2：检查视图错误

Answer 1

如果我的理解正确，那么您正在尝试创建一个网站，该网站可以让用户导航到新页面而不触发页面刷新。这是动态网站的现代功能。

出于这个目的，由于与iframe相关的许多样式问题（请考虑响应式移动网页），绝对最好在iframe上使用jquery / ajax。这是一个使用jquery / ajax实现的简单代码段

index.html：

<html>
<head>

  <!-- load ajax, file can also be loaded locally -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    /* create event handler that loads content into main area when navigation link is clicked */
    $(document).ready(function () {
      $('#link1').click(function(){
        $('#main_body').load('overview.html');
      });
    });
  </script>

</head>
<body>

  <div class="mainheader"> 
    <h3>My Project Name</h3>
  </div>

  <div class="topnav">
    <a id="link1">Overview</a>            
  </div>

  <!-- where you want the page to load -->
  <div id="main_body"></div>

</body>
</html>

overview.html：

<html>
<style>
  #wrapper {
    background-color: yellow;
    height: 200px;
  }
</style>

<div id="wrapper">
  <p>Dynamically loaded webpage</p>
</div>
</html>

link to a demo

请注意，动态加载内容时需要考虑一些安全问题。您可以在以下问题中了解有关此内容的更多信息：Dynamic html page creation with jquery

编辑：您的代码在在线文本编辑器上可以正常工作。仅当您将网页托管在可以使用支持的协议方案（例如http / https）加载网页的服务器上时，Ajax才起作用。

简单的侧边栏导航可填充主要内容

1 个答案: