logo标签列表

使用哈希加查询字符串作为 jQuery 引擎网页的锚点？

phpjavascriptjqueryhashquery-string
3
这是我的情况。我有一个网页（还没有完成）：http://grapplingbasics.com/beta.php。我让页面滑动到特定的div，这会在URL栏中添加一个带有#的URL。如果用户参考此URL，则可以跳转到页面的特定部分。但是，我想让他们能够跳转到页面的特定部分，并加载一个特定的视频。似乎不能将查询字符串和哈希值一起使用，如下所示：www.blah.com/index.php#BLAH?neat=one。最初，我尝试将哈希值变为查询字符串的一部分，然后在jquery中使用split将其分配为哈希值。然而，这样做的问题是，如果我返回false到导航，它不会显示URL栏中的查询字符串，如果我不返回false，则会导航到不存在的内容！有什么解决方案吗？
2个回答
1

我为您创建了一个小例子，应该可以解释如何解决这个问题。

 <script type="text/javascript">

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    }


    $(function () {
        $('a').click(function (event) {

            var thisHash = document.location.hash;

            $('body').animate({ scrollTop: $(thisHash).offset().top }, function () {
                if (getParameterByName('neat') != null) {
                    alert('I will play video ' + getParameterByName('neat'));
                }
            });
        });
    });

</script>

HTML：

<a href='?neat=one#end'>Go</a>

<p id='end'>Imagine this is a panel you are going to in your example.</p>

上面的代码首先有一个 getParameterByName 函数，它会查找您的 URL 来查找查询字符串值对。如果它不为空，则返回其值。
在下面的部分中...想象一下锚标记是您的导航，我点击了它，然后页面动画到正确的哈希部分。完成动画后，在回调部分会要求查询字符串值。如果您已经为 "neat" 设置了一个值，则播放视频的代码应该位于现在警报的位置。
非常感谢您提供的代码和时间。您能否简单解释一下这里发生了什么，以便我知道如何实现它？谢谢。 - ionfish
1
这是一个很好的观点。我尝试将它们都放入哈希值中，然后使用split函数将视频的哈希转换为"?="。但是ajax无法拉取视频，我得到了这个错误：意外的输入结束这是否与ajax难以处理页面URL有关？ - ionfish
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接