Question

我在这里使用CSS-Tricks动态页面脚本。

http://css-tricks.com/dynamic-page-replacing-content/

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        /*
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                        */
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

$(window).trigger('hashchange');

});

身体

<body onload="onLoad()">

我在其中一个页面上使用了一个数字生成脚本（下面），但我无法将其显示在一个单页面上。当放置在文档的头部或我在每个页面上加载的includes / scripts.php时，它会显示在每个页面上。当只包含在我想要的页面上时，它不起作用。

<script>

function counter() {
var num = 0;
    for (num = 0; num < 500; num++) { 
      document.write(num + ' &nbsp; ');      
    }
}
counter();

</script>

我尝试了一些不同的东西，但似乎无法让它只显示在一个页面上。如果不放弃CSS-Tricks动态页面，有没有办法解决这个问题？

Answer 1

如果您将代码插入到像这样的dynamicpage.js中该怎么办？

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if(newHash === 'somePage') { // the page you want to implement the effect
      // your code
    }
    /*
      ....
    */
});

Answer 2

您可以尝试将一个类添加到<body>标记（或者其他接近顶级的包装器，如果您只是动态加载到正文标记的HTML属性中），这样就可以了脚本区分应该使用该功能的页面和不使用该功能的页面，如：

$(document).ready( function() {
    $(`body.usesCounter`).on(eventToBeCounted, counterFuncAsCallback);
    }

但是当它仅在单个页面上加载时它不起作用这一事实确实表明你还有其他事情正在发生。你能给我们一个页面的标题，脚本块（以及它在页面上的位置），以及它如何/何时被调用的感觉？

您是否动态加载单页？如果是的话，除非你以某种方式重新加载DOM，否则将无法访问脚本标记，或者通过jQuery的$.on()或类似的侦听DOM更改的类似物做一些时髦的绑定。

更新

查看您尝试模拟的教程，您面临的一般问题是您正在加载的页面上的JS不会向DOM注册。我不得不编写可以像这样动态读取JS的代码，如果你想有效和安全地做到这一点，那就需要付出相当大的努力。基于JS的页面加载的重点是获取“视图”内容;资产，html等。在单页面环境中，任何所需的逻辑应该 - 通常存在于该页面上的。

我强烈建议您在初始页面中包含代码，然后在适当的页面到达时有条件地调用它。有很多方法可以做到这一点，基本上找到了应该运行计数器的页面的一些显着特征，并且在加载页面后，查找所述功能，以及如果找到，请允许您的代码运行。您可能有一些简单的变量，isCounterPage默认设置为false。然后，在发生动态页面加载后，如果检查触发并且此var保持为false，则不要执行与计数器关联的代码。否则，让它做它的事情。

在动态加载的页面上加载JS函数

2 个答案:

更新