Javascript 头中调用的js并不总是加载
我正在从头构建一个响应迅速的网站,用作SharePoint 2013主页,用于控制网格和断点。一旦发布,js文件(Javascript 头中调用的js并不总是加载,javascript,css,html,web,Javascript,Css,Html,Web,我正在从头构建一个响应迅速的网站,用作SharePoint 2013主页,用于控制网格和断点。一旦发布,js文件(skel.min.js,skel panels.min.js,jquery.min.js,html5shiv.js,以及我为配置skel和skel面板而编写的一个简单的config.js)不能在每次用户访问站点时可靠地运行,将CSS冻结在浏览器当时匹配的任何断点处。刷新通常会解决问题,但这不是一个可接受的解决方案。到目前为止,IE、Chrome和FF(所有不触发html5shiv的版
skel.min.js
,skel panels.min.js
,jquery.min.js
,html5shiv.js
,以及我为配置skel和skel面板而编写的一个简单的config.js
)不能在每次用户访问站点时可靠地运行,将CSS冻结在浏览器当时匹配的任何断点处。刷新通常会解决问题,但这不是一个可接受的解决方案。到目前为止,IE、Chrome和FF(所有不触发html5shiv的版本)中都出现了这种情况
是否有人有排除Skelj故障的经验,或者知道这种行为的更高层次原因?我对JavaScript不够精通,无法自己解决这个问题,但即使是朝着正确的方向努力,我也会非常感激
更新:捕获了IE开发者工具(IE10)中的一个错误。控制台报告SCRIPT5007:无法获取未定义或空引用的属性“匹配”
,并指向第25行的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>
这是另一个抛出的异常:<代码> Script PT438:对象不支持属性或方法''SkelelpPaulels%Cux/<代码> <代码> SKEL面板.min .js<代码>在线6字符192,这正好在该语句的中间:<代码> C.IS(“:可见”)C.SkelpPaelelsSUnLe():C.O.SkelpPaelelsx Open.()}代码>
同样按照要求,我添加了console.log(b);console.log(b.attr(“类”)
在上面提到的第一条语句之前,查看失败时b
是什么。当它工作时,b
的两个实例都显示为“6u”,这是skel.min.js中的一个类,定义了一行中某个部分的宽度。当脚本失败时,只记录b
的第一个实例,它是“未定义的”
更新3:根据多人的建议,我尝试在页面末尾加载js,但这破坏了所有脚本。在做了更多的阅读之后,我决定重新安排css和脚本链接的顺序,以便首先加载css。但我发现现代浏览器使用推测性解析,所以顺序应该无关紧要。我确认了这一点,在加载页面时没有看到明显的行为变化。不过,作为参考,脚本首先出现(大约在SharePoint调用的默认脚本之后的一半),然后css链接到
标题的底部。我还没有找到解决这个问题的办法,所以欢迎提出任何建议 可能不相关,但值得一提……通过ASP.NET(见下面的“~”)src=“~/\u catalogs/masterpage/SiteName/js/jquery.min.js”
您是否尝试过不使用麻烦的.js文件的缩小版本?显然,你想要缩小,但有些东西要扔出去
有人提到将js放在html文档的末尾,以便完全加载dom。我很好奇你是如何加载CSS文件和JS的。如何在HTMLDOM中对css/js文件进行排序
最后,您是否可以在本地计算机上复制此问题,还是仅在发布后才会发生在最终用户身上?听起来像是DOM的问题。虽然在本地一切看起来都很好,但当延迟被添加时,您的DOM没有完全加载,因此您的响应设计和js的表现不好。可能没有关联,但值得一提……通过ASP.NET(见下面的“~”)src=“~/\u catalogs/masterpage/SiteName/js/jquery.min.js”让您继续前行
您是否尝试过不使用麻烦的.js文件的缩小版本?显然,你想要缩小,但有些东西要扔出去
有人提到将js放在html文档的末尾,以便完全加载dom。我很好奇你是如何加载CSS文件和JS的。如何在HTMLDOM中对css/js文件进行排序
最后,您是否可以在本地计算机上复制此问题,还是仅在发布后才会发生在最终用户身上?听起来像是DOM的问题。虽然本地看起来一切正常,但当添加延迟时,您的DOM没有完全加载,因此您的响应设计和js表现不佳。将脚本标记添加到masterpage时,design Manager会附加XML注释:
//<![CDATA[
即使
和
之间的块内容为空。
该特定行为导致skel.js
中断-因为skel.js
希望从该脚本块的内容中读取其配置(这是配置的一种可能方式),因为XML注释被skel.js
解析并理解为无效配置条目
解决方案非常简单:不要使用
引用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>-->
希望这有帮助
Dragan将脚本标记添加到母版页时,Design Manager会附加XML注释:
//<![CDATA[
即使
和
之间的块内容为空