时间戳

首页 > 解决方案 > 将 html 文件加载到不同的 div 时的两个问题

javascript - 将 html 文件加载到不同的 div 时的两个问题

问题描述

我是一名高级程序员，但对 javascript 和 CSS 的可能性很陌生。接下来是对我拥有的和想要的东西的描述：

  1. 布局 在此处输入图像描述

  2. 我的文件夹： Test_portal：包含 iNat_main.html 文件和 2 个子文件夹： • iNat_files：包含要根据选择加载到“submenu”div 或“obs”div 中的 html 文件。• iNat_images：包含要在html 文件中加载的图像，该文件根据选定的“子菜单”项加载到“obs”div 中。

  3. 问题：

  4. 当我选择一个“菜单”项时，它会加载到“子菜单” div 中，但它没有使用布局中显示的整个区域。滚动条太短。

  5. 当我选择一个“子菜单”项时，它被加载到一个“obs”div中，但它显示在布局的子菜单区域（页面左侧）而不是布局的obs区域（页面右侧） .

iNat_main.html

function load_menu(htmname){
document.getElementById("submenu").setAttribute("style","height:600px");
document.getElementById("submenu").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}

function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: lightgreen;
padding: 2px;
text-align: center;
font-size: 8px;
color: black;
}
 
.inline-block-child {
float: left;
}
 
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color:yellow;
}
li {
float: right;
border-right: 2px solid #000;
}
li a {
display: block;
font-size: 20px;
padding: 20px;
}
.bggrey {
    background-color: lightgrey;
    overflow-x: scroll;
}
.bgdata {
    background-color: cyan;
}
 
.float-container {
border: 3px solid #fff;
padding: 5px;
}
 
.float-child_l {
    background-color: lightgrey;
width: 35%;
float: left;
padding: 5px;
border: 2px solid black;
}
.float-child_r {
width: 65%;
float: left;
padding: 5px;
border: 2px solid green;
}
</style>
<body>
<header role="banner">
<h1>My nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</header>
<br>
 
<div id="menu">
<p dir="rtl"> Select what to show </p>
 
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/R_menu.html")>Reptiles</a></li>    
</ul>
</div>
<section class='container'>
<div class='float-container'>
    <div id ="submenu" class='float-child_l bggrey' width=40% scrollHeight="400px";>
      <p><dir="rtl" style="center">  ID=SubMenue </p>
    </div>
    
    <div id="obs" class='float-child_r bgdata' width=58% >
      <h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
    </div>
</div>
</section>
 
</body>
</html>

B_menu.html

function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<body>
<object>
<p align=center><b> List of Birds</p>
<br>
<div>
<div id ="submenu" width=40%>
<section>
<p align=center><b> Select item to display </p>
<ol>
<li>&nbsp;&nbsp;&nbsp;<a href="#obs" onclick=load_data("./BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li>&nbsp;&nbsp;&nbsp;<a href="#obs" onclick=load_data("./BID64.html")>אנפת לילה = Nycticorax nycticorax</a></li>
<li>&nbsp;&nbsp;&nbsp;<a href="#obs" onclick=load_data("./BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li>&nbsp;&nbsp;&nbsp;<a href="#obs" onclick=load_data("./BID72.html")>צוצלת = Streptopelia senegalensis</a></li>
<li>&nbsp;&nbsp;&nbsp;<a href="#obs" onclick=load_data("./BID126.html")>שלדג גמדי = Alcedo atthis</a></li>
</ol>
</section>
<br>
<div id="obs" class='child inline-block-child bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</object>
</body>

BID125.html

<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.col-1 {width: 60%; padding: }
.col-2 {width: 40%; padding: }
.col-3 {width: 20.0%; padding: 0.5%;}
.zoomA {
width: 20.0%; padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(5.0);
}
</style>
<body>
<p align=center><b> Selected item data</p>
<div id ="obs" width=65%>
<p align=center><b>Birds</p>
<br>
<colgroup><col width:"50.0%;"/><col width:"50.0%;"/></colgroup>
<table cellpadding="0" cellspacing="0" border="1px" style="width:100%;">
<tr>
<th  align="left" class=col1>Bubulcus ibis</th>
<th  align="right" class=col2>ציפורים - אנפית בקר</th>
</tr>
</table>
<p align="right" dir="rtl"> #125 אגמון החולה 08/11/2018 בדרגת-מחקר </p><br>
<table cellpadding="0" cellspacing="0" border="3px" style="width:70%;">
<colgroup><col width:"33.3%;"/><col width:"33.3%;"/><col width:"33.3%;"/></colgroup>
<tr>
<img src=../iNat_images/img125.jpg class="zoomA">
<img src=../iNat_images/img125_1.jpg class="zoomA">
</tr>
</table>
<br>
</div>
</body>

两个 IBIS 图像 在此处输入图像描述 在此处输入图像描述

标签： javascripthtmlcss

解决方案

要加载这样的数据，您需要使用Ajax。<object>不适合像那样加载 HTML（在边缘情况下<iframe>可以使用，但我也不建议这样做）。

这是一个如何将外部 HTML 加载到<div>. 我使用Fetch API进行加载。您可以看到我在 HTML 文档中使用纯 HTML，并使用 JavaScript 和事件监听器来控制将要发生的事情。文档的内容page1.html只是 HTML 需要的片段（而不是正文、头部等）。

var menu, content;

const loadhtml = href => {
  fetch(href)
    .then(response => response.text())
    .then(html => {
      content.innerHTML = html;
    });
};

const onmenuclick = e => {
  e.preventDefault();
  if (e.target.nodeName == 'A') {
    let href = e.target.attributes['href'].value;
    loadhtml(href);
  }
};

document.addEventListener('DOMContentLoaded', e => {
  menu = document.getElementById('menu');
  content = document.getElementById('content');

  menu.addEventListener('click', onmenuclick);
});
<ul id="menu">
  <li><a href="page1.html">Page 1</a></li>
  <!--
    here I'm replacing the reference to an external HTML document
    with a data URL so that you can see how it works in this Stackoverflow snippet.
  -->
  <li><a href="data:text/html,<h1>Page 2</h1>">Page 2</a></li>
</ul>

<div id="content"></div>

推荐阅读