堆栈内存溢出
  繁体   English   中英

你如何在MasterPage中包含JavaScript？

[英]How do you include JavaScript in MasterPage?

 原文  2013-12-17 18:06:30  6   5    c#/ javascript/ jquery/ asp.net/ css

问题描述

我在VS 2012，.NET framework 4.5中使用C＃构建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

在root中：单个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.

5 个解决方案

解决方案1
 16 已采纳  2013-12-17 18:57:45

HTML

除了具有特征检测功能的Modernizr之类的脚本之外，您通常不希望<head />中包含任何脚本。 将所有脚本移动到页面底部是一种最佳实践，如下所示： 

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


的script.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({


MISC

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

解决方案2
 2  2014-09-28 22:41:50

您可以在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>

相对vs绝对URL

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

../符号从包含链接的文件夹中跳出一步。 确保你有足够的'../'来引用正确的文件。

〜/ symbol创建一个从项目根开始的路径。

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

有关绝对URL和相对URL之间差异的更多信息，请检查javascript中相对路径和绝对路径之间的差异

解决方案3
 0  2013-12-17 18:11:24

尝试更换〜/与../。 我的一个项目是做同样的事情并修复它。

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

解决方案4
 0  2013-12-17 18:53:26

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

解决方案5
 0  2019-04-04 14:40:49

如果你想在每个页面上加载js，包括相对路径，那么在modernizr条目下面添加它： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在带有母版页的单个ASP.NET页中使用2个按钮进行验证？ 如何在javascript中设置contentpage中的masterpage dom元素 您如何将 FirstOrDefault 与 Include 一起使用？ 如何在主页中使用当前用户登录 如何将数据放入母版页？ ASP中的JavaScript与MasterPage Javascript无法从母版页运行 MasterPage上的Javascript问题 您如何在 ClickOnce 部署中包含许多其他文件？ 如何在 NuGet 包中包含类库的 Xml 文档？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM