0

画像を表示したり、オーディオ (CAPTCHA) を再生したりできるという要件があります。画像とオーディオの周りに div タグを追加し、ハイパーリンクをクリックすると、div の表示が変更されますが、変更 (div) が失われると失われます。ページが再表示されます。

使用技術: Java、JSP、javascript

があります

  1. a) 画像を
    表示する (デフォルト) または

    b) 要求されたときにオーディオを再生する

    画像と音声の両方の「src」はサーブレットです。

    <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 
}

`

4

1 に答える 1

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インジェクションは、すでにあなたが望んでいることを達成しているようです。私の解決策で問題が解決しない場合は、詳細をお知らせください。

于 2013-08-25T02:16:51.630 に答える