Question

我有一个HTML5（jsp）页面，其中包含一个链接（此处）到另一个页面，该页面上有一个链接（Home），单击该链接时会弹出一条消息。但是，加载页面时会弹出消息，这是不可取的。有人请看下面的代码，并给我一个解决方案/建议如何防止这种行为？谢谢。

第一页上的

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>

Answer 1

这是使用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>

会话结束后，会自动删除该会话存储变量。

Answer 2

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

Answer 3

我不确定这是如何工作的，但我将div的名称更改为id并将id重命名为helpDialog并更改为在$（document）.on函数中使用它。然后我摆脱了$（document）.on参数列表中函数的函数参数列表中的'e'。这解决了问题。我不确定其中哪一个可以解决问题。

如何防止在html页面加载时弹出窗口

3 个答案: