1

我正在从头开始构建一个响应式网站，用作 SharePoint 2013 母版页，使用skel.js来控制网格和断点。一旦发布，js 文件（skel.min.js, skel-panels.min.js, jquery.min.js,html5shiv.js和config.js我编写的用于配置 skel 和 skel-panels 的简单文件）不会在用户每次访问站点时可靠地运行，从而使 CSS 在浏览器当时匹配的任何断点处冻结. 刷新通常可以解决问题，但这不是可接受的解决方案。到目前为止，这发生在 IE、Chrome 和 FF（所有不触发的版本html5shiv）中。

有没有人有解决 skeljs 的经验，或者知道这种行为的更高层次的原因？我对 JavaScript 的熟练程度不足以为自己解决这个问题，但即使是朝着正确的方向推进也会受到赞赏。

更新：在 IE Developer Tools (IE10) 中发现了一个错误。控制台报告SCRIPT5007: Unable to get property 'match' of undefined or null reference并指向skel-panels.min.js第 25 行字符 484。我查看了该行，违规语句似乎是：

b.attr("class").match(/(\s+|^)([0-9]+)u(\s+|$)/)&&b.data("cell-size",parseInt(RegExp.$2))};

这是否提供了任何有用的见解？我认为这是最常见的错误，但相信还有其他错误。我将继续尝试在所有浏览器中捕获所有这些。

更新 2：根据要求，这里是对头部 js 文件的调用。请注意，这些已转换为 SharePoint 母版页语法（当您发布页面时它会自动执行该语法），但它们与“标准”js 引用相同，并且 SharePoint 不会改变它们的工作方式。

    <!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/jquery.min.js">//<![CDATA[-->
    <!--ME://]]></script>-->
    <!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/config.js">//<![CDATA[-->
    <!--ME://]]></script>-->
    <!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/skel.min.js">//<![CDATA[-->
    <!--ME://]]></script>-->
    <!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/skel-panels.min.js">//<![CDATA[-->
    <!--ME://]]></script>-->

这是在 SharePoint 将其包装在自己的注释中之前的样子：

<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/jquery.min.js"></script>

这是它抛出的另一个异常：SCRIPT438: Object doesn't support property or method '_skel_panels_close'在skel-panels.min.js第 6 行字符 192 中，就在该语句的中间：c.is(":visible")?c._skel_panels_close():c._skel_panels_open()};

同样根据要求，我console.log(b);console.log(b.attr("class"));在上面提到的第一条语句之前添加了它，以查看b它何时失败。当它工作时，两个实例b都是“6u”，它是 skel.min.js 中的一个类，它定义了一行中一个部分的宽度。当脚本失败时，只b记录第一个实例并且它是“未定义的”。

更新 3：根据多人的建议，我尝试在页面末尾加载 js，但这破坏了所有脚本。在做了更多阅读之后，我决定重新安排 css 和脚本链接的顺序，以便 css 先加载。不过，我发现现代浏览器使用推测解析，因此顺序无关紧要。我通过在加载页面时没有看到明显的行为变化来确认这一点。但作为参考，脚本首先出现（大约在 SharePoint 调用的默认脚本之后的一半），然后 css 链接在head. 我还没有找到解决这个问题的方法，所以欢迎任何建议！

4

2 回答 2

1

将脚本标记添加到母版页时，设计管理器会附加 XML 注释：

//<![CDATA[

和

//]]

即使<script>and之间的块内容</script>为空。该特定行为导致skel.js中断 - 正如skel.js预期从该脚本块的内容中读取其配置（这是配置的一种可能方式），因为 XML 注释被解析skel.js并理解为无效的配置条目。

解决方案非常简单：您应该使用 SharePoint ScriptLink ，而不是<script>用于引用文件：skel.js

<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/skel.min.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/skel-panels.min.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/init.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->

希望这可以帮助。

德拉甘

于 2014-07-28T11:41:02.330 回答
0

可能不相关但值得一提...让您通过 ASP.NET 进行调整（见下文'~'） src=" ~ /_catalogs/masterpage/SiteName/js/jquery.min.js"

您是否尝试过不使用麻烦的 .js 文件的缩小版？显然你想要缩小的，但有些东西要扔在那里。

有人提到在您的 html 文档末尾添加您的 js 以允许 dom 完全加载。我很好奇您是如何加载 CSS 文件和 JS 的。你如何在 html dom 中排序你的 css/js 文件？

最后，您能否在本地计算机上重现此问题，还是仅在您发布后才会发生在最终用户身上？对我来说听起来像是一个 DOM 问题。虽然在本地看起来一切都很好，但当添加延迟时，您的 DOM 并没有完全加载，因此您的响应式设计和 js 表现不佳。

于 2013-09-14T05:31:34.680 回答