Question

我正在努力让我的网站能够像this demo一样顺畅地在网页之间进行切换。使用他们使用的插件jquery.smoothState.js，我试图让它工作，没有结果。最后，我只是复制/粘贴了演示的HS文件并删除了我不需要的东西。

现在我将div转换到页面上，当我点击它们从页面转换过来的链接时，我会陷入无限加载状态，因为我不断收到错误："TypeError: html.replace is not a function"哪些引用在我的JS文件中 line：138 。我通过使用Firefox中的“检查元素”功能并查看控制台来看到这一点。

产生错误的行与演示站点上的行相同。唯一的区别是我收到了错误而演示没有。如果我删除（参考我的JS文件）行：138-150，错误消失，所需的动画成功运行一个电路（从主页转到alt页面并返回）。返回主页后，链接将更改为从主页转到主页而不是alt页面。

为什么我收到此错误并且演示网站不是？无论如何我能做到这一点吗？

Pastebin链接到我的代码：

HTML（主页）

HTML（Alt Page）

CSS（动画集）

CSS（格式化）

Javascript（包含底部的jquery.js，jquery.smoothState.js和smoothState设置）

The Demo Site

jquery.smoothState.js Download Page

编辑：行：我的js文件中的133-172（jquery.smoothState.js代码的一部分）:(行错误：138）

133 htmlDoc: function (html) {
134     var parent,
135         elems       = $(),
136         matchTag    = /<(\/?)(html|head|body|title|base|meta)(\s+[^>]*)?>/ig,
137         prefix      = 'ss' + Math.round(Math.random() * 100000),
138         htmlParsed  = html.replace(matchTag, function(tag, slash, name, attrs) {
139             var obj = {};
140             if (!slash) {
141                 elems = elems.add('<' + name + '/>');
142                 if (attrs) {
143                     $.each($('<div' + attrs + '/>')[0].attributes, function(i, attr) {
144                         obj[attr.name] = attr.value;
145                     });
146                 }
147                         elems.eq(-1).attr(obj);
148             }
149                     return '<' + slash + 'div' + (slash ? '' : ' id="' + prefix + (elems.length - 1) + '"') + '>';
150         });
151
152             // If no placeholder elements were necessary, just return normal
153             // jQuery-parsed HTML.
154             if (!elems.length) {
155                 return $(html);
156             }
157             // Create parent node if it hasn't been created yet.
158             if (!parent) {
159                 parent = $('<div/>');
160             }
161             // Create the parent node and append the parsed, place-held HTML.
162             parent.html(htmlParsed);
163             
164             // Replace each placeholder element with its intended element.
165             $.each(elems, function(i) {
166                 var elem = parent.find('#' + prefix + i).before(elems[i]);
167                 elems.eq(i).html(elem.contents());
168                 elem.remove();
169             });
170 
171             return parent.children().unwrap();
172 },

编辑：行：574-590在我的js文件中（smoothState设置）：

;(function ($) {
    'use strict';
    var $body    = $('html, body'),
        content  = $('#main').smoothState({
            prefetch: true,
            pageCacheSize: 4,
            onStart: {
                duration: 250,
                render: function (url, $container) {
                    content.toggleAnimationClass('is-exiting');
                    $body.animate({
                        scrollTop: 0
                    });
                }
            }
        }).data('smoothState');
})(jQuery);

Answer 1

问题是.replace属于String prototype。您收到TypeError: html.replace is not a function，因为html不是字符串。

要解决此问题，您应该将html强制转换为字符串，然后执行必要的.replace操作：

var htmlParse = html.toString().replace(/* etc */);

如何在不破坏jquery动画的情况下使用@keyframes进行平滑的页面转换

1 个答案: