动态更新的下载链接鼠标悬停时浏览器状态栏仍显示旧值的问题求助
动态更新的下载链接鼠标悬停时浏览器状态栏仍显示旧值的问题求助
各位开发者朋友好,我最近遇到了一个有点头疼的小问题,想请教下大家的解决方案:
我做了一个网页,里面有个带下载链接的图片按钮——用<a>标签包裹<img>标签实现的。需求是:用户点击图片下载文件前,先检查登录用户的账号状态,根据状态把下载请求重定向到对应的子目录。我现在的实现方式是点击时发起请求到PHP接口,接口返回对应子目录名称,再动态替换下载链接里的路径部分。
现在的问题是:点击图片确实能跳转到正确的子目录下载,但鼠标悬停在图片上时,浏览器状态栏里显示的还是原来的旧链接,用户看不到更新后的真实下载地址,体验不太好。我试了几种方法都没搞定,想问问大家有没有办法让悬停时就能显示更新后的链接?
我的相关代码如下:
前端HTML代码
<article class="post post––single"> <header class="post__header">...</header> <div class="post__content"> <div class="ck-_content"> <style> .centerImage { display: block; margin-left: auto; margin-right: auto; } </style> <a href="https://example.com/dload/Windows/XnView_MP_win_x64_1.8.8.exe"> <img src="public/storage//site-graphics/download-button-120x100.png" class="centerImage"> </a> <br><br><br> <section class="new-item-shar"></section> <br> </div> <footer class="post__footer">...</footer> <br> </article>
前端jQuery代码
<script type="text/javascript"> $(document).ready(function() { $("article.post > div > a").click( function( e ){ e.preventDefault(); $link = $(this); $.get("https://example.com/data/public/webservicev2.php?do=1", function(response, status) { $link.attr('href').replace("dload/",response); } ); }); }); </script>
后端PHP片段
... $return = "sends/"; ... echo $return; ?>
另外我也注意到,现在的逻辑是点击时才去请求接口修改href,这就导致悬停时href还是初始值,状态栏自然显示旧链接。如果改成页面加载时就请求接口更新href,又担心用户可能不会点击下载,造成不必要的接口请求;如果在悬停时请求,又怕频繁触发请求影响性能。有没有更优雅的处理方式呢?
麻烦大家给我支支招,谢谢啦!
内容来源于stack exchange
相关产品推荐
相关产品推荐

