menu-loader.js_V1版本及修改方法最简单方法?取消logoLink.js

Submitted by admin on Tue, 11/04/2025 - 14:27

#################
取消logoLink.js，在网页下方添加

#################

你给“菜单加载”这部分只绑了 DOMContentLoaded，但是没有兜底处理“脚本被加载进来时，DOMContentLoaded 早就触发过了”的情况。你的“页脚修改功能”那一段是有兜底的：

if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', modifyFooter); } else { modifyFooter(); }

但“菜单加载部分”没有这一步，所以在某些浏览器的某些加载顺序里（Edge 很容易这样），等你这段 JS 下载完并执行时，DOMContentLoaded 已经发过了，你再去 addEventListener('DOMContentLoaded', ...) 就永远不会执行，所以第一次没菜单；第二次刷新因为缓存更快、时序刚好，就又正常了。

我们把“菜单加载”也改成和“页脚”一样的写法就行了。

下面是你这个文件的一个改过的版本，核心就是：

把菜单加载逻辑单独放进 loadMenu() 函数；
初始化时判断 document.readyState，如果已经不是 loading 了，就直接跑一次；
其余逻辑都保持不变。

// 立即执行函数包装整个脚本
(function() {

// 封装一个真正干活的函数
function loadMenu() {
var menuElements = document.querySelectorAll('td.menu');

if (menuElements.length > 0) {
var menuElement = menuElements[0];

var xhr = new XMLHttpRequest();
xhr.open('GET', '/Artocarpus/menu.html', true);

xhr.onload = function() {
if (xhr.status === 200) {
menuElement.innerHTML = xhr.responseText;
console.log('菜单已成功替换');

// 绑定菜单搜索功能
setupMenuSearch();
} else {
console.error('加载菜单失败，HTTP状态码: ' + xhr.status);
}
};

xhr.onerror = function() {
console.error('网络错误，无法加载菜单');
};

xhr.send();
} else {
console.error('未找到class="menu"的TD元素');
}
}

// 页面就绪时加载菜单 —— 加兜底
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadMenu);
} else {
// DOM 已经准备好了，直接执行
loadMenu();
}

// 设置菜单搜索功能
function setupMenuSearch() {
// 定义菜单搜索处理函数
window.handleMenuSearch = function() {
var form = document.getElementById('menu-search-form');
if (!form) {
console.error('未找到菜单搜索表单');
return false;
}

var searchInput = form.querySelector('input[name="q"]');
var searchTerm = searchInput.value.trim();

if (!searchTerm) {
alert('Please enter a local-site search term');
return false;
}

// 始终使用站点内搜索
form.action = "/cgi-bin/Artocarpus/simple-search.cgi";
form.target = "_self";

form.submit();
return true;
};

// 添加回车键支持
var searchInput = document.querySelector('#menu-search-form input[name="q"]');
if (searchInput) {
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
handleMenuSearch();
}
});
}
}

// =========================
// 下面是你原来的页脚修改功能
// =========================

function debug(message) {
console.log('[页脚修改] ' + message);
}

function modifyFooter() {
// 预加载ZWY_LOGO图片
var preloadImg = new Image();
preloadImg.src = '/Artocarpus/images/ZWY_LOGO.png';

// 查找页脚表格
var footerTables = document.querySelectorAll('table[width="1200px"][height="100%"], table[align="center"][width="1200px"]');

// 备用查找方式
if (footerTables.length === 0) {
var allTables = document.querySelectorAll('table');
for (var i = 0; i < allTables.length; i++) {
if (allTables[i].textContent.includes('ArtocarpusGD is developed by')) {
footerTables = [allTables[i]];
break;
}
}
}

if (footerTables.length === 0) {
debug('未找到页脚表格');
return;
}

var footerTable = footerTables[0];
debug('找到页脚表格');

// 获取表格行
var footerRow = footerTable.querySelector('tr');
if (!footerRow) {
debug('未找到表格行');
return;
}

// 获取原有单元格
var cells = footerRow.querySelectorAll('td');
if (cells.length !== 2) {
debug('未找到预期的2个单元格');
return;
}

var textCell = cells[0];
var logoCell = cells[1];

try {
// 保存原始行高度
var originalHeight = footerRow.offsetHeight;

// 创建新的三列布局
footerRow.innerHTML = '';

// 设置行为弹性布局，确保垂直居中
footerRow.style.display = 'flex';
footerRow.style.alignItems = 'center';
footerRow.style.justifyContent = 'space-between';

// 第一列：ZWY_LOGO
var zwyCell = document.createElement('td');
zwyCell.style.flex = '0 0 15%';
zwyCell.style.display = 'flex';
zwyCell.style.justifyContent = 'flex-start';
zwyCell.style.alignItems = 'center';
zwyCell.style.height = originalHeight + 'px'; // 保持原始高度

var zwyLogoLink = document.createElement('a');
zwyLogoLink.href = 'http://www.scib.ac.cn';
zwyLogoLink.target = '_blank';
zwyLogoLink.style.display = 'flex';
zwyLogoLink.style.justifyContent = 'center';
zwyLogoLink.style.alignItems = 'center';
zwyLogoLink.style.height = '100%';

var zwyLogo = document.createElement('img');
zwyLogo.src = '/Artocarpus/images/ZWY_LOGO.png';
zwyLogo.alt = "ZWY logo";
zwyLogo.style.maxWidth = '80px';
zwyLogo.style.maxHeight = '80px';
zwyLogo.style.objectFit = 'contain';
zwyLogo.style.border = "0";

zwyLogoLink.appendChild(zwyLogo);
zwyCell.appendChild(zwyLogoLink);

// 第二列：文字内容（完美居中）
var centerCell = document.createElement('td');
centerCell.style.flex = '1';
centerCell.style.display = 'flex';
centerCell.style.flexDirection = 'column';
centerCell.style.justifyContent = 'center';
centerCell.style.alignItems = 'center';
centerCell.style.textAlign = 'center';
centerCell.style.height = originalHeight + 'px'; // 保持原始高度
centerCell.style.padding = '0 20px';

var textContainer = document.createElement('div');
textContainer.innerHTML = textCell.innerHTML;
textContainer.style.maxWidth = '100%';
centerCell.appendChild(textContainer);

// 第三列：原始LOGO (右对齐)
var newLogoCell = document.createElement('td');
newLogoCell.style.flex = '0 0 15%';
newLogoCell.style.display = 'flex';
newLogoCell.style.justifyContent = 'flex-end';
newLogoCell.style.alignItems = 'center';
newLogoCell.style.height = originalHeight + 'px';

var logoContainer = document.createElement('div');
logoContainer.style.display = 'flex';
logoContainer.style.justifyContent = 'flex-end';
logoContainer.style.alignItems = 'center';
logoContainer.style.height = '100%';

var originalLogo = logoCell.querySelector('img');
if (originalLogo) {
var clonedLogo = originalLogo.cloneNode(true);
clonedLogo.style.maxWidth = '80px';
clonedLogo.style.maxHeight = '80px';
clonedLogo.style.objectFit = 'contain';
logoContainer.appendChild(clonedLogo);
} else {
logoContainer.innerHTML = logoCell.innerHTML;
var logoImg = logoContainer.querySelector('img');
if (logoImg) {
logoImg.style.maxWidth = '80px';
logoImg.style.maxHeight = '80px';
logoImg.style.objectFit = 'contain';
}
}

newLogoCell.appendChild(logoContainer);

footerRow.appendChild(zwyCell);
footerRow.appendChild(centerCell);
footerRow.appendChild(newLogoCell);

debug('成功创建完美居中的三列布局页脚');
} catch (error) {
debug('修改页脚时出错: ' + error.message);
footerRow.innerHTML = '';
footerRow.appendChild(textCell);
footerRow.appendChild(logoCell);
}
}

// 执行页脚修改
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', modifyFooter);
} else {
modifyFooter();
}

})();

Main menu

You are here

User login

menu-loader.js_V1版本及修改方法最简单方法?取消logoLink.js