Question

我正在使用本文中概述的动态页面/替换内容技术：

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

但是，我无法让其他脚本工作。提供的代码似乎打破了所有其他Javascript（特别是灯箱和一些用于调整大小的代码）

这是我在文章中使用的代码。

我有一些代码只能在调整大小时运行，并且在调整浏览器大小时有效。但由于某些原因，在网站完成加载时应该运行的代码不起作用。

$(function() {

if(Modernizr.history){

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() {
    _link = $(this).attr("href");
    history.pushState(null, null, _link);
    loadContent(_link);
    return false;
});

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

$(window).bind('popstate', function(){
   _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
   loadContent(_link);
});

} // otherwise, history is not supported, so nothing fancy here.


});

Answer 1

我们需要有关您正在加载的其他库的更多信息以及它们被插入的页面加载过程的哪个部分（<head>，在<body>内，<body>之后，内嵌文本， CDN等。）

但是jQuery不是唯一使用$作为速记的API，你可能很好地混合了错误的那个而没有进行无冲突预防。我在这里为你做了这件事：

(function (window, document, $) {
    if (Modernizr.history === false) return false;
    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el;

    function loadContent(href) {
        $("#guts")
            .fadeOut(200, function () {
            $mainContent.hide()
                .load(href + " #guts", function () {
                $mainContent.fadeIn(200, function () {
                    $pageWrap.animate({
                        height: baseHeight + $mainContent.height() + "px"
                    });
                });
                $("nav a").removeClass("current");
                console.log(href);
                $("nav a[href$=" + href + "]").addClass("current");
            });
        });
    }
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    $("nav").on("click", "a", function () {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });
    window.onpopstate = function () {
        _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
        loadContent(_link);
    };
})(this, this.document, jQuery, undefined);

我也被带走了，并用当前支持的标准（.delegate()和直接javascript）替换了已弃用的函数调用（.bind()，.on()）。

还有一些其他优化/更正。干杯：）

Answer 2

我很确定美元符号函数会覆盖文档的onload处理程序，这就是你的onload函数没有运行的原因。将代码移动到该函数中，它应该在页面加载时运行。

就像，如果你现在的代码是

document.onload=function() {/*stuff here*/};

$(function() {
     /* copy and pasted code here */
});

将其更改为

$(function() {

     /*your stuff here*/

     /*copy and pasted code here*/
});

或者如果你想让你的豌豆和胡萝卜分开：

$(function() {
     /*your stuff here*/
});

$(function() {
     /*copy and pasted code here*/
});

jQuery动态页面打破其他Javascript

2 个答案: