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 注入已经完成了你想要的。如果我的解决方案不能解决您的问题，请提供更多详细信息。