0

单击 btnzoomprevious 和 btnzoomnext 后，我​​想在我的 url 中附加一个名为?zoom=1的查询。

<div id=zoomview class="view" style="left:100px;<%=isZoom?"":"display:none;" %>">
            <div class="side">
                <a id="btncloseview" class="btnview" style="left:-100px; top:60px;">close</a>
                <a id="btnzoomprevious" class="btnzoomprevious" href="<%=ResolveClientUrl("~/" + gender + "/" + category + "/" + character + "/")%><%=prevproductName%><%=Request.Url.Query%>?zoom=1" style="margin:420px 0 0 -100px; display:<%=statusprev%>"></a>
                <a id="btnzoomnext" class="btnzoomnext" href="<%=ResolveClientUrl("~/" + gender + "/" + category + "/" + character + "/")%><%=nextproductName%><%=Request.Url.Query%>?zoom=1 " style="margin:420px 0px 0 810px; display:<%=statusnext%>"></a>
            </div>
            <%if(!isZoom) {%>
                <img src="<%=productImagesPath + prevproductImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;"/>
                <img src="<%=productImagesPath + nextproductImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;"/>
            <%}else {%>       
                <img data-src="<%=productImagesPath + productImageZoom %>.jpg" id="mainImage" alt="Main Image" style="height:800px; width:800px;">
            <%} %>
        </div>

我不能在 asp 中使用该方法，因为?zoom=1再次附加。单击 btncloseview 后，我需要删除房间。

4

1 回答 1

1

你想做什么？您只是想将查询附加到窗口中的 url 吗？它可能是这样的：

<script type='text/javascript'>
  $("#btnzoomprevious").on("click", function() {
     if (window.location.href.indexOf('?zoom=1') == -1) {
        window.location.href = window.location.href + '?zoom=1';
     }
  });

  $("#btnzoomnext").on("click", function() {
    if (window.location.href.indexOf('?zoom=1') == -1) {
        window.location.href = window.location.href + '?zoom=1';
    }
  });

  $("#btncloseview").on("click", function() {
    if (window.location.href.indexOf('?zoom=1') != -1) {
        window.location.href = window.location.href.substring(0, window.location.href.indexOf('?zoom=1'));
    }
  });
</script>

但是，这会导致页面重新加载。如果您正在寻找页面不重新加载的解决方案，您可以在此处找到更多信息：

http://spoiledmilk.com/blog/html5-changeing-the-browser-url-without-refreshing-page/

文章的简短版本是，您可以实现以下功能：

window.history.pushState("object or string", "Title", "/new-url");

所以，你可以这样做：

<script type='text/javascript'>

    var urlPath = '';

    $("#btnzoomprevious").on("click", function() {
        if (window.location.href.indexOf('?zoom=1') == -1) {
            urlPath = window.location.href + '?zoom=1';
            window.history.pushState("","", urlPath);
        }
    });

    $("#btnzoomnext").on("click", function() {
        if (window.location.href.indexOf('?zoom=1') == -1) {
           urlPath = window.location.href + '?zoom=1';
           window.history.pushState("","", urlPath);
        }
    });

    $("#btncloseview").on("click", function() {
        if (window.location.href.indexOf('?zoom=1') != -1) {
           urlPath = window.location.href.substring(0, window.location.href.indexOf('?zoom=1'));
           window.history.pushState("","", urlPath);
        }
    });

</script>

您可以在此处找到 David Murdoch 关于在不重新加载页面的情况下更新 URL 的原始帖子以获取更多信息：David 的帖子

祝你好运！

于 2013-06-20T03:41:16.740 回答