框架内加载

Submitted by admin on Sat, 05/17/2025 - 03:00

修改方案：给网页添加 Home 和 Image 选项卡并实现框架内加载

分析了您的 Perl CGI 代码，我发现这是一个展示基因组信息的网页，现在需要添加新的导航选项并实现在同一框架内加载内容。

修改思路

  1. 在现有导航栏左侧添加 Home 和 Image 链接
  2. 使用 iframe 或 JavaScript 实现在同一页面内加载内容，保持顶部导航栏不变
  3. 确保 Home 链接能够返回主页

实施方案

第一部分：修改导航链接

找到代码中的这一部分（出现在两个地方）：

 

 

 

perl

<tr><td><table class=\"tablecell\" width=\"100%\" cellpadding=\"0\" cellspacing=\"10px\" bgcolor=\"#ffffff\">
<tr><td align=\"center\"><a href=\"../../Artocarpus/search.htm\">Search</a> || <a href=\"../../Artocarpus/blast/blast.html\">BLAST</a> || <a href=\"../../Artocarpus/jbrowse.htm\">JBrowse</a> || <a href=\"../../Artocarpus/download.htm\">Download</a></td></tr>
</table>
</td></tr>

将其修改为：

 

 

 

perl

<tr><td><table class=\"tablecell\" width=\"100%\" cellpadding=\"0\" cellspacing=\"10px\" bgcolor=\"#ffffff\">
<tr><td align=\"center\"><a href=\"javascript:loadContent('../../Artocarpus/index.html')\">Home</a> || <a href=\"javascript:loadContent('../../Artocarpus/image.html')\">Image</a> || <a href=\"javascript:loadContent('../../Artocarpus/search.htm')\">Search</a> || <a href=\"javascript:loadContent('../../Artocarpus/blast/blast.html')\">BLAST</a> || <a href=\"javascript:loadContent('../../Artocarpus/jbrowse.htm')\">JBrowse</a> || <a href=\"javascript:loadContent('../../Artocarpus/download.htm')\">Download</a></td></tr>
</table>
</td></tr>

第二部分：添加 JavaScript 函数和内容显示区域

在 HTML 头部的 <script> 标签之后添加如下 JavaScript 函数：

 

 

 

perl

print <<HTML;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="shrimp">
<meta name="Description" content="genomic database">
<link href="../../Artocarpus/css/dropdown.css" rel="stylesheet" type="text/css">
<link href="../../Artocarpus/css/buttonstyle.css" rel="stylesheet" type="text/css">
<link href="../../Artocarpus/css/style.css" rel="stylesheet" type="text/css">
<link href="../../Artocarpus/css/theme.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../Artocarpus/javascript/logoLink.js"></script>
<script type="text/javascript" src="../../Artocarpus/javascript/menu-loader.js"></script>
<title>ArtocarpusGD - a portal of artocarpus multi-omics data</title>
<script language="JavaScript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}

// 添加新函数用于在框架内加载内容
function loadContent(url) {
if (url == '../../Artocarpus/index.html') {
// 如果是点击Home，直接跳转到主页
window.location.href = url;
return;
}

// 其他页面加载到内容区域
var contentFrame = document.getElementById('contentFrame');
if (contentFrame) {
contentFrame.src = url;

// 显示iframe，隐藏基因组信息内容
contentFrame.style.display = 'block';
document.getElementById('genomeContent').style.display = 'none';
}
}

// 切换回显示基因组信息
function showGenomeContent() {
document.getElementById('contentFrame').style.display = 'none';
document.getElementById('genomeContent').style.display = 'block';
}
</script>
</head>
HTML

第三部分：添加内容显示区域

在基因组信息表格之前添加一个 iframe 用于显示内容，并给基因组内容添加 ID：

找到这部分代码（可能出现在多个地方）：

 

 

 

perl

print("<tr><td colspan=2 align=center><h4>$latin genome</h4></td></tr>

在此之前添加以下代码：

 

 

 

perl

print("<tr><td><iframe id=\"contentFrame\" style=\"display:none; width:100%; height:600px; border:none;\"></iframe></td></tr>");
print("<tr><td colspan=2 id=\"genomeContent\">");

然后在适当的位置（如最后一个表格行之后）关闭 div：

 

 

 

perl

print("</td></tr>");

第四部分：修改导航栏点击行为

为了让当前展示的基因组页面也能在导航栏中有对应选项，添加一个"Genome"选项：

 

 

 

perl

<tr><td><table class=\"tablecell\" width=\"100%\" cellpadding=\"0\" cellspacing=\"10px\" bgcolor=\"#ffffff\">
<tr><td align=\"center\"><a href=\"javascript:loadContent('../../Artocarpus/index.html')\">Home</a> || <a href=\"javascript:loadContent('../../Artocarpus/image.html')\">Image</a> || <a href=\"javascript:showGenomeContent()\">Genome</a> || <a href=\"javascript:loadContent('../../Artocarpus/search.htm')\">Search</a> || <a href=\"javascript:loadContent('../../Artocarpus/blast/blast.html')\">BLAST</a> || <a href=\"javascript:loadContent('../../Artocarpus/jbrowse.htm')\">JBrowse</a> || <a href=\"javascript:loadContent('../../Artocarpus/download.htm')\">Download</a></td></tr>
</table>
</td></tr>

完整修改思路解释

  1. 添加导航选项卡：在现有导航栏中添加 Home 和 Image 选项，并修改所有链接使用 JavaScript 函数加载内容
  2. 页面内容加载机制：
    • 创建 iframe 元素用于显示其他页面内容
    • 给当前基因组内容添加 ID，以便切换显示/隐藏
    • 添加 JavaScript 函数处理内容加载逻辑
  3. 特殊处理 Home 链接：Home 链接直接跳转到主页，而不是在框架内加载
  4. 添加 Genome 选项：允许用户从其他内容回到当前基因组页面

这种实现方式的优点是：

  • 保持导航栏一直可见
  • 避免完全刷新页面，提高用户体验
  • 特殊处理 Home 链接，确保返回主页功能正常

注意：您需要确保 image.html 页面存在，或者将其替换为您实际想要使用的页面路径。