解决QFNU曲阜师范大学png超链接失效问题

Submitted by admin on Sat, 11/29/2025 - 06:12

 <!-- <td align="right"><a href="https://www.qfnu.edu.cn" style="position: relative; z-index: 999; display: inline-block;"><img alt="logo" src="images/logo.png" width="80" border="0"></a></td></tr> -->
<!--替换为下面-->
       
          <td align="right">
            <a href="https://www.qfnu.edu.cn" target="_blank" style="display: inline-block; width: 80px; height: 80px; text-decoration: none;">
            <div style="width: 100%; height: 100%; background-image: url('images/logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center right;">
            </div>
           </a>
         </td>

 

<!--解决思路
 

 

这是一个非常有意思的情况。

分析原因： 你遇到的情况是：加上 onclick 后代码可能出现了语法细节问题（比如引号嵌套错误），导致 footer-loader.js 脚本在运行时报错崩溃了。JS 脚本一旦报错，后面的代码（生成 ZWY logo、调整三列布局）就不会执行，所以你看到的是“格式没了，另外一个图片也没了”。

终极解决方案（“欺骗”脚本法）： 既然我们不能改 JS，我们可以利用 JS 逻辑中的一个“后门”。

原理： 你的 JS 脚本逻辑是：“如果我找到了 <img> 标签，我就把它拿出来（扔掉链接）…… 如果我没找到 <img> 标签，我就直接复制原来单元格里的所有内容（保留链接）。”

所以，我们只要用 CSS 背景图 代替 <img src...> 标签，脚本就会以为“这里没有图片”，从而直接复制你写好的带链接的代码！

请用下面的代码完全替换原有的 <td>：

 

替换后的 HTML 代码

 

HTML

<td align="right">
<a href="https://www.qfnu.edu.cn" target="_blank" style="display: inline-block; width: 80px; height: 80px; text-decoration: none;">
<div style="width: 100%; height: 100%; background-image: url('images/logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center right;">
</div>
</a>
</td>

 

为什么这样做有效？

 

  1. 绕过检测：JS 里的 querySelector('img') 找不到 <img> 标签（因为我们换成了 <div>），所以脚本不会去“拆解”你的代码。
  2. 触发保留机制：脚本会进入 else 分支，执行 logoWrapper.innerHTML = logoCell.innerHTML，这意味着你写的 <a> 标签会被原封不动地搬到新位置。
  3. 视觉一致：background-image 会像图片一样显示 logo。
  4. 脚本安全：这完全是合法的 HTML，不会导致 JS 报错，所以 ZWY logo 和三列布局都能正常加载
    -->