2015-10-02 73 views
0

我有一個HTML5(jsp)頁面,其鏈接(此處)指向另一個頁面,該頁面上有一個鏈接(Home),單擊該鏈接時會彈出一條消息。但是,頁面加載時彈出消息,這是不可取的。請有人看看下面的代碼,並給我一個解決方案/建議如何防止這種行爲?謝謝。第一頁上如何防止HTML頁面加載時出現彈出

HTML鏈接:

<td class="align-left">Click <a href="javascript:fnCallActionOnSelf('newpage.htm')">here</a></td> 

的JavaScript:

<script> 
function fnCallActionOnSelf(actionName) 
{ 
    if(actionName == "newpage.htm"){ 
     nullPageValues(); //here link does not like special characters like apostrophes being sent over by the GET  
    } 
    document.forms[0].method = "GET"; 
    document.forms[0].target = ''; 
    document.forms[0].action = actionName; 
    document.forms[0].submit(); 
} 
function nullPageValues() { 
    //This is for the here link because it does not like special characters like apostrophes being sent over by the GET 
    document.getElementById('textField1').value=""; 
    document.getElementById('password').value=""; 
    document.getElementById('Name').value=""; 
    document.getElementById('Address').value=""; 
    document.getElementById('City').value=""; 
    document.getElementById('PhoneNumber').value="";  
} 
</script> 

Jsp頁面,這裏鏈接指向:

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta content="IE=9; IE=8; IE=7; IE=EDGE; chrome=1" http-equiv="X-UA-Compatible"> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"> 
<meta content="no-cache" http-equiv="Pragma"> 
<meta content="0" http-equiv="Expires"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta charset="utf-8"> 
</head> 
<body> 
    <div id="container"> 
     <center> 
      <div style="width: 960px;"> 
       <div> 
        <div id="Help" 
         style="vertical-align: middle; display: table-cell;"> 
         <jsp:include page="Help.jsp"> 
          <jsp:param name="isHome" value="no" /> 
         </jsp:include> 
        </div> 
       </div> 
      </div> 
     </center> 
    </div> 
    <div style="clear: both"></div> 
    <form:form method="post" name="newform" 
     id="newform" commandName="newformModel" data-parsley-validate="true"> 
    </form:form> 
<!-- Lots of stuff here --> 
    <script src="/project/js/prototype.js" type="text/javascript"></script> 
    <script src="/project/js/scripts.js" type="JavaScript"></script> 
    <script src="/project/js/global.js" type="text/javascript"></script> 
    <script src="/project/js/civem.js" type="text/javascript"></script> 
    <script src="/project/js/jquery-1.10.2.min.js"></script> 
    <script src="/project/js/jquery.validate.min.js"></script> 
    <script src="/project/js/jquery-ui.js"></script> 
    <script src="/project/js/plugin.js"></script> 
    <script src="/spiaprojectweb/js/validation.js"></script> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
    <script> 
     $(function() { 
     $("#dialog").dialog(); 
     }); 
    </script> 
    </body> 
</html> 

首頁鏈接jsp頁面:

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script> 
$(document).on("click","a[name='lnkViews']", function (e) { 
    $(function() { 
    $("#dialog").dialog(); 
    }); 
}); 
function fnCallActionOnSelf(actionName) { 
    document.forms[0].target = ''; 
    document.forms[0].method = "POST"; 
    document.forms[0].action = actionName; <script> 
    document.forms[0].submit(); 
} 
function openWindow(anchor) 
{  
    window.open(anchor,'NewWindow','status=0,toolbar=0,resizable=yes,scrollbars=1,width=800,height=600'); 
} 
function findPosition(oElement) 
{ 
    oElement=document.getElementById(oElement); 
    if(typeof(oElement.offsetParent) != 'undefined') 
    { 
     for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) 
     { 
      posX += oElement.offsetLeft; 
      posY += oElement.offsetTop; 
     } 
     return posX; 
    } 
    else 
    { 
     return posX; 
    } 
} 
var timeout   = 0; 
var closetimer  = 0; 
var ddmenuitem  = 0; 

// open hidden layer 
function mopen(id) 
{ 
    // cancel close timer 
    mcancelclosetime(); 

    // close old layer 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';    
    ddmenuitem = document.getElementById(id); 
    var salesAidesPos=findPosition('salesLiId'); 
    salesAidesPos-=20;  
    ddmenuitem.style.left=salesAidesPos+'px'; 
    ddmenuitem.style.visibility = 'visible'; 
} 
function mopenHelp(id) 
{ 
    // cancel close timer 
    mcancelclosetime(); 

    // close old layer 
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';    
    ddmenuitem = document.getElementById(id); 
    var salesAidesPos=findPosition('helpId'); 
    salesAidesPos-=40;  
    ddmenuitem.style.left=salesAidesPos+'px'; 
    ddmenuitem.style.visibility = 'visible'; 
} 
// close showed layer 
function mclose() 
{ 
    if(ddmenuitem) 
    { 
     ddmenuitem.style.left='0px'; 
     ddmenuitem.style.visibility = 'hidden'; 
    } 
} 

// go close timer 
function mclosetime() 
{ 
    closetimer = window.setTimeout(mclose, timeout); 
} 

// cancel close timer 
function mcancelclosetime() 
{ 
    if(closetimer) 
    { 
     window.clearTimeout(closetimer); 
     closetimer = null; 
    } 
} 

// close layer when click-out 
document.onclick = mclose; 
</script> 

<div id="navcontainer" class="header"> 
    <span class="headtitle"></span> <span class="utility"> 
     <ul class="dropdown"> 
      <span id="helpId"> 
       <li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()" 
        onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li> 
      </span> 
     </ul> 
    </span> 
</div> 
<div id="dialog" title="Help" style="display:none;"> 
    <p><b>Help Message</b></p> 
</div> 
<div id="spacer"> 
    <img src="/project/img/spacer.gif" /> 
</div> 
<script type="text/javascript"> 
    function setUpdateMessagePosition(oElement) { 
     oElement = document.getElementById(oElement); 
     if (typeof (oElement.offsetParent) != 'undefined') { 
      for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { 
       posX += oElement.offsetLeft; 
       posY += oElement.offsetTop; 
      } 
      if (document.getElementById("updateMsg") != null) { 
       posX = posX + 8; 
       posY = posY + 3; 
       document.getElementById("updateMsg").style.left = posX + "px"; 
       document.getElementById("updateMsg").style.top = posY + "px"; 
      } 
     } 
    } 

我不知道上面的意思是什麼,或者是否有必要,但在我看來,所有的行爲(感興趣的代碼)位於以上jsp文件的片段中:

<script> 
$(document).on("click","a[name='lnkViews']", function (e) { 
    $(function() { 
    $("#dialog").dialog(); 
    }); 
}); 
</script> 

       <li class=""><a name='lnkViews' href="javascript:void(0);" onmouseout="mclosetime()" 
        onmouseover="javascript: mopenHelp('helpDiv');">Help</a></li> 

<div id="dialog" title="Help" style="display:none;"> 
    <p><b>Help Message</b></p> 
</div> 

回答

0

這是使用sessionStorage的好時機!你可以這樣做。改變你的這部分代碼:

 <script> 
     $(document).on("click","a[name='lnkViews']", function (e) { 
     $(function() { 
      $("#dialog").dialog(); 
     }); 
     }); 
     </script> 

這樣:

 <script> 
     $(document).on("click","a[name='lnkViews']", function (e) { 
     $(function() { 
     if (sessionStorage.visitedalready) { 
      sessionStorage.visitedalready= 1; 
     } 
     else{ 
     $("#dialog").dialog(); 
     }});}); 
     </script> 

那會話存儲變量,一旦您的會話被結束被自動刪除。

+0

謝謝你的建議,萬斯,但它不適合我。問題是,當頁面加載時,它仍然彈出。我需要它不會在頁面加載時彈出。不過感謝您的關注。 –

+0

我已經從包含的jsp頁面中刪除了所有無關的代碼。它看起來像我的樣式顯示:在div中沒有​​沒有工作在頁面加載。下面是簡化的Help.jsp頁面: –

0
<script> 
    $(document).on("click","a[name='lnkViews']", function (e) { 
    $(function() { 
    if (sessionStorage.visitedalready) { 
     sessionStorage.visitedalready= 1; 
    } 
    else{ 
    $("#dialog").dialog(); 
    }});}); 
    </script> 
+0

代碼很好,但帶有解釋的代碼實際上更有用。 –

0

我不知道這是如何工作,但我改變了我的div的名稱,ID和改名id來helpDialog並改爲使用,在$(文件)。在函數。然後我擺脫了$(document).on參數列表中函數的函數參數列表中的'e'。這解決了問題。我不確定其中哪一個做了訣竅。