java - 如何在点击超链接后使用基于浏览器的音频标签刷新页面

Question

我有一个要求，可以看到图像或播放音频(CAPTCHA)。我在图像和音频周围添加了 div 标签，并且通过单击超链接，它们确实更改了 div 的显示，但更改了(div)当页面重新显示时会迷失方向。

使用的技术:Java、JSP、javascript

有一个

1. jsp 中需要的部分
   a) 显示图像(默认)或

   b)根据请求播放音频

   图像和音频的“src”都是一个 servlet。

   <tr> 
      <td> &nbsp;</td>
      <td> <div id="audioPlayerContainer" style="display:none"> </div> 
      </td>    
   </tr> 
   <tr>    
      <td> &nbsp;</td>
      <td><div id="imageContainer"> 
          <img src='MyServlet?mode=image&ts=<%=Math.random()%>' width="100" height="100"/>
       </div>  
      </td>
   </tr>
   

2. jsp 中存在用于在请求图像或音频之间切换的链接的部分

   <a href="#" onclick="switchMode('audio');">Play audio</a> //       OR
   <a href="#" onclick="switchMode('image');> Show image</a> 
   

3. 点击链接时的 JavaScript

   function switchMode(modeType){ 
     if (modeType=="audio"){       
         var uri = '/MyServlet?mode=audio&ts='+new Date().getTime();
         document.getElementById('audioPlayerContainer').style.display ="block";   
         document.getElementById('imageContainer').style.display ="none";
          //logic to determine the browser type and browser verion- embed tag or audio
        document.getElementById("audioPlayerContainer").innerHTML=
         "<embed src='"+uri+"' autostart='true' loop='false' height='100' width='100'/>";      
     }else if (modeType=="image"){ 
         document.getElementById("audioPlayerContainer").style.display = "none";
        document.getElementById('imageContainer').style.display ="block";
     }
    //page to reload with updated divs
    //window.location.href=window.location.href; 
    //window.location.reload(0); //Both reloads page, state of div tags comes bck to default
     //document.forms[0].submit();//this doesnt even seem to work 
   }
   

`

Answer 1

刷新/提交/任何离开页面的操作都不会保留您所做的任何更改，因为您只是在页面加载后更改 dom 元素；您没有在任何地方“保存”此更改。那么也许是这样的？

<a href="#" onclick="?mode=audio">Play audio</a> //       OR
<a href="#" onclick="?mode=image"> Show image</a> 

然后在你的 javascript 中执行

modeType="<%= request.getParameter("mode") %>";
switchMode(modeType);
function SwitchMode(modeType){ //...

而且我不明白为什么你需要刷新，看起来你正在做的 dom 注入(inject)已经完成了你想要的。如果我的解决方案不能解决您的问题，请提供更多详细信息。