您如何在 MasterPage 中包含 JavaScript？

Posted

技术标签:

【中文标题】您如何在 MasterPage 中包含 JavaScript？【英文标题】：How do you include JavaScript in MasterPage? 【发布时间】：2014-01-05 15:39:19 【问题描述】：

我正在用 C# 在 VS 2012，.NET 框架 4.5 中构建一个 ASP.NET Webform 应用程序

我在应用程序的根目录中有一个 MasterPage，javascript 文件位于名为 js 的文件夹中。

问题出在：如果页面位于根文件夹中，那么一切都工作正常（css + js），如果我将任何页面放在子文件夹中 然后 css 可以工作，但是那些 JavaScripts 根本不工作，显然引用路径是错误的。

所以 Css 引用路径很好，但是对于脚本，无论我使用什么，它们都不起作用（js/script.js 或 ~/js/script.js 或 /js/script.js 或 ../ ResolveUrl, ResolClientveUrl ... 或 http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ 中的所有方法）它们都指的是 root/SUB-FOLDER/js/script.js 而不是 root/js/script.js

在根目录中：单个 MasterPage、Default.aspx、test.aspx、js 文件夹、css 文件夹和 Pages 文件夹。默认和测试页面是工作文件，但是 Pages 文件夹中的所有页面都没有显示 .js 所以当页面不在根目录中时路径是错误的

在我的母版页中：

<head runat="server">
<title></title>

<link rel="stylesheet" href="~/css/style.css" />

<%-- tried these and lot more but NOT workkkkkkkkkkk --%>

<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>

<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>

script.js 类似于：

....
    $.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function()
    if($('.tweet').length)$.include('js/jquery.tweet.js');
    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
    if($('#counter').length)$.include('js/jquery.countdown.js');
    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
    $('.main-slider')._TMS(
.....

Web 浏览器的开发者工具（控制台）出现错误：

    Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

【问题讨论】：

您应该删除~/。由于脚本不是 ASP.NET 控件，所以按原样添加到最终的 html 中，浏览器无法识别~/。 @Givi 不起作用，我尝试了所有方法 /js、../js、~/js 或 js，然后在 ResolveUrl 和 ResolClientveUrl 中相同 移除服务器端评论标签。 &lt;%-- --%&gt; @Givi 已删除 并且根文件夹中包含的所有页面都不起作用 你能展示你的服务器的结构吗？并展开母版页的结构？ 【参考方案1】：

如果您希望 js 在每个页面上加载，包括相对路径，则将其添加到modernizr 条目下方：

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/Scripts/jquery.min.js") %>
    <%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>

【讨论】：

【参考方案2】：

HTML

您通常不希望 &lt;head /&gt; 中的任何脚本，除了像 Modernizr 这样具有特征检测的脚本。将所有脚本移动到页面底部更像是一种最佳做法，如下所示：

<html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' />
    <asp:ContentPlaceHolder ID="Head" runat="server" />
</head>
<body>

    <!-- Scripts at bottom of page for faster loading. -->

    <script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script>
    <script src='<%= ResolveUrl("~/js/script.js") %>'></script>

</body>
</html>

脚本.JS

在 script.js 中引用其他脚本文件将需要将 / 附加到 'js/`，如下所示：

$.include('/js/superfish.js');
$.include('/js/FF-cash.js');
$.include('/js/tms-0.4.x.js');
$.include('/js/uCarausel.js');
$.include('/js/jquery.easing.1.3.js');
$.include('/js/jquery.tools.min.js');
$.include('/js/jquery.jqtransform.js');
$.include('/js/jquery.quicksand.js');
$.include('/js/jquery.snippet.min.js');
$.include('/js/jquery-ui-1.8.17.custom.min.js');
$.include('/js/jquery.cycle.all.min.js');
$.include('/js/jquery.cookie.js');

if($('.tweet').length)
    $.include('/js/jquery.tweet.js');

if($('.lightbox-image').length)
    $.include('/js/jquery.prettyPhoto.js');

if($('#contact-form').length || $('#contact-form2').length)
    $.include('/js/forms.js');

if($('.kwicks').length)
    $.include('/js/kwicks-1.5.1.pack.js');

if($('#counter').length)
    $.include('/js/jquery.countdown.js');

if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)
    $.include('/js/jquery.atooltip.pack.js');

// Slider
$('.main-slider')._TMS(

杂项

在测试所有这些时，不要忘记清除缓存或进行隐私浏览！

【讨论】：

好的，所以我按照您的建议编辑 script.js 文件（基本上删除了 /js），我仍然无法加载资源：服务器响应状态为 404（未找到）localhost:52403/Pages/js/jquery-1.7.1.min.js 所以显然它总是指向 SUBFOLDER 然后 js/script.js 而不是直接指向 js/script.js 加载资源失败：服务器响应状态为 404（未找到）localhost:52403/Pages/js/script.js 您展示的母版页，【参考方案3】：

您可以在 head 标签、contentplaceholder 标签或 body 标签内包含一个 .js 文件。在任何情况下，这都会反映在您包含此母版页的其他页面中。您需要关注的是创建路径的方式。

下面的代码将一个 jquery 文件添加到母版页的 head 部分的母版页中。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>


<title></title>

<script src="jquery-2.1.1.min.js"></script>

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>


<form id="form1" runat="server">
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">


    </asp:ContentPlaceHolder>
</div>
</form>
<script>

</script>

相对网址与绝对网址

通过在 url 路径之前使用 ../ 和 ~/ ，您正在创建一个相对 URL。当您更改您所引用的文件或包含链接的文件的文件夹级别时，相对 URL 的路径会受到影响。

../ 符号从包含链接的文件夹中迈出一步。确保您有足够的“../”来引用正确的文件。

~/ 符号创建一个从项目根目录开始的路径。

要创建绝对 URL，只需将要包含在页面中的文件从 Visual Studio 中的解决方案资源管理器拖到页面。

更多关于绝对和相对URL检查的区别 Difference between Relative path and absolute path in javascript

【讨论】：

【参考方案4】：

您应该在文件位置之前使用~ 前缀。 （像这样：~/projects/files/web/admin）

【讨论】：

【参考方案5】：

尝试将 ~/ 替换为 ../。我的一个项目正在做同样的事情并且修复了它。

另外，确保即使在服务器上（而不仅仅是在项目中），JS 文件夹也位于根目录的正下方。

【讨论】：

以上是关于您如何在 MasterPage 中包含 JavaScript？的主要内容，如果未能解决你的问题，请参考以下文章

如何在静态文本标签中包含特殊字符？

如何在文本中包含一个小部件？

如何在 Prolog 中包含 .pl 文件？

如何在 Rails 3.1 中包含供应商 js

如何教 Eclipse 在源路径中包含 Maven 源包？

在哪里放置以及如何在 c++ 项目中包含 dll 文件？