为什么 url 中的“#”会阻止 jquery 脚本执行

Why does a "#" in the url stop a jquery script from executing?

本文关键字：jquery 脚本 执行 url 中的 为什么      更新时间：2023-09-26

我正在使用"DynamicPage"jQuery插件使我的页面在导航时不会重新加载。索引页上是一个名为"硬币滑块"的图像滑块插件。动态页面工作正常，除非我单击以返回到图像滑块所在的索引页面。由于某种原因（据我所知），Coin-Slider 就绪函数在返回索引时未激活。可能与 URL 有关，因为 host.com/index.php 有效，但 host.com/#index.php 无效。它这样做的原因是什么？我尝试在 js 文件的 DynamicPage 函数中包含就绪函数，以便在页面更改时执行，但它没有帮助。页面包含在下面。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css.css" rel="stylesheet" type="text/css" />
        <title>Liberty Design, Scarborough</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
        <script type='text/javascript' src='js/dynamicpage.js'></script>
        <script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
    </head>
    <body>
        <div id="nav-back"></div>
        <div id="wraps">
            <div id="left-wrap"></div>
            <div id="right-wrap"></div>
        </div>
        <div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
            <div id="page-wrap">
                <div id="header">
                    <div id="banner">
                        <div id="social"><a href="https://www.facebook.com/pages/Liberty-Retreat/195182670529660"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></a></div>
                    </div>
                </div>
                <navbar>
                    <div id="nav">
                        <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
                        <ul id="navbar">
                            <li><a href="index.php">Home</a></li>
                            <li><a href="test.php">Facilities</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Where are we?</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </navbar>
                <section id="main-content">
                    <div id="guts">           
                        <!-- Content Start -->
                        <div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
                            <div id="gamesHolder">
                                <div id="games">
                                    <img src="images/banner_img/1335800583.png" alt="Welcome" />
                                    <span>
                                        <b>Welcome</b><br/>
                                        Welcome to Liberty
                                    </span>
                                    <img src="images/banner_img/1335800633.png" alt="shop front" />
                                    <span>
                                        <b>shop front</b><br/>
                                        this is the front of the shop
                                    </span>
                                    <img src="images/banner_img/" alt="staff #3" />
                                    <span>
                                        <b>staff #3</b>
                                        <br/>this is the description for staff #3
                                    </span>
                                    <img src="images/banner_img/" alt="staff #1" />
                                    <span>
                                        <b>staff #1</b><br/>
                                        this is staff #1
                                    </span>
                                    <img src="images/banner_img/" alt="asdas" />
                                    <span>
                                        <b>asdas</b><br/>
                                        sdasdas
                                    </span>       
                                </div>
                            </div>
                        </div>
                       <script>
                            $(document).ready(function() {
                                $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
                            });
                        </script>
                    </div>
                </section>
                <div id="footer">
                    <!-- Cosmetics for the footer -->
                    <div id="footer-back"></div>
                    <div id="footer-wraps">
                        <div id="footer-left-wrap"></div>
                        <div id="footer-right-wrap"></div>
                    </div>
                    <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
                    <center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
                </div>
            </div>
        </div>
    </body>
</html>

好的，mydomain.com 和 mydomain.com/#anything 是一样的，它们指向你的默认文件，可以是索引.php、索引.html或其他什么。浏览器在导航到同一文件但不同的哈希标签时不会刷新，例如：从文件#哈希A到文件#哈希B或从文件到文件#哈希随机或从文件#索引.php到文件。由于页面不刷新（被闲置），因此文档就绪也不会被触发（它在第一次加载页面时就已经被触发了）。

首先修复您的问题：而不是链接到 mydomain.com/#index.php 链接到 mydomain.com 或 mydomain.com/index.php

第二个修复是：

<script>
$(document).ready(function() {
  var sliderInit = false;
  $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
  // Adding fix
  $('#idOfLinkThatGetsClicked').click(function () {
    if (!sliderInit) {
      $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
      sliderInit = true;
    }
  });
});
</script>
相关文章：