在 head 中调用的 js 并不总是加载

js called in head does not always load

本文关键字：加载 js head 调用      更新时间：2023-09-26

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

是否有人有对 skeljs 进行故障排除的经验，或者知道此行为的更高级别原因？我对 JavaScript 不够精通，无法自己解决这个问题，但即使是朝着正确的方向推动也会不胜感激。

更新：在 IE 开发人员工具 （IE10） 中捕获了一个错误。控制台报告SCRIPT5007: Unable to get property 'match' of undefined or null reference，并指向第 25 行字符 484 处的skel-panels.min.js。我看了那行，冒犯性的陈述似乎是：

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'第 6 行字符 192 的 skel-panels.min.js 个字符，它正好在这个语句的中间：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的底部。我仍然没有找到这个问题的解决方案，所以欢迎任何建议！

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

//<![CDATA[

和 

//]]

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

解决方案非常简单：与其使用 <script> 来引用skel.js文件，不如使用 SharePoint ScriptLink：

<!--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>-->

希望这有帮助。

德拉甘

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

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

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

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

相关文章：