外部文件中 Javascript 中的相对路径

IT技术 javascript html asp.net-mvc css path
2021-01-13 18:44:09

所以我正在运行这个 javascript，一切正常，除了背景图像的路径。它适用于我的本地 ASP.NET Dev 环境，但在部署到虚拟目录中的服务器时它不起作用。

这是在一个外部 .js 文件中，文件夹结构是

Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg

那么这是包含 js 文件的地方

Site/Views/ProductList/Index.aspx

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url('../Images/filters_expand.jpg')");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url('../Images/filters_collapse.jpg')");
    }
});

我试过使用'/Images/filters_collapse.jpg'，也不管用；但是，如果我使用'../../Images/filters_collapse.jpg'.

基本上，我希望具有与 ASP.NET tilda 相同的功能 - ~。

更新

外部 .js 文件中的路径是相对于它们所包含的页面还是 .js 文件的实际位置？

6个回答

JavaScript 文件路径

在脚本中时，路径是相对于显示页面的

为了让事情更容易，你可以打印出一个简单的 js 声明，并在你的脚本中使用这个变量：

2010 年 2 月左右在StackOverflow 上使用的解决方案：

<script type="text/javascript">
   var imagePath = 'http://sstatic.net/so/img/';
</script>

如果你访问该页面在2010年左右，你可以只看看StackOverflow上的HTML源代码，你会发现这个坏蛋的单行[格式化〜3行:)]在<head />部分

我最终这样做了，除了我使用 Url.Content 来生成值imagePath.谢谢！
2021-03-17 18:44:09
这有效，但它也绝对是一种解决方法，而不是正确的解决方案。@schory 的回答给了我 OP 问题的解决方案。
2021-04-01 18:44:09
我曾经Url.Content("~")获得应用程序根。第
2021-04-01 18:44:09
我也喜欢做 var imagePath = window.location.protocol + "//" + window.location.host + "/"
2021-04-04 18:44:09
哈哈，我做了同样的事情，然后回来阅读你的评论。
2021-04-07 18:44:09

通过解析引用它的 'src' 属性的 DOM，在运行时使用 jQuery 获取 javascript 文件的位置：

var jsFileLocation = $('script[src*=example]').attr('src');  // the js file path
jsFileLocation = jsFileLocation.replace('example.js', '');   // the js folder path

（假设您的 javascript 文件名为“example.js”）

$("#FkngDiv").load(jsFileLocation+"../FkngFolder/FkngPage.aspx") 对我来说就像一个魅力。我以这种方式使用它返回一个文件夹级别，然后我只指向我想要的路径。
2021-03-13 18:44:09
很好的答案。我会将.replace表达式更改为jsFileLocation.replace(/example\.js.*$/, '')，以防在后面有像版本号这样的查询字符串.js
2021-03-20 18:44:09
亲爱的先生，你是我最新的英雄！使用此解决方案在 ASP.NET MVC 应用程序中的服务器上找到我的 css 路径，该应用程序是从我的 javascript 文件夹的一侧向一侧的文件夹动态加载的...
2021-04-08 18:44:09

正确的解决方案是使用 css 类而不是在 js 文件中编写 src。例如，而不是使用：

$(this).css("background", "url('../Images/filters_collapse.jpg')");

利用：

$(this).addClass("xxx");

并在页面中加载的 css 文件中写入：

.xxx {
  background-image:url('../Images/filters_collapse.jpg');
}
如果我使用的是非 css 属性，这将不起作用。例如：<img src="/codes/imgs/a.png">。我无法通过 css 设置此 src 属性。
2021-03-23 18:44:09

好问题。

  • 在 CSS 文件中时，URL 将相对于 CSS 文件。

  • 使用 JavaScript 编写属性时，URL 应始终与页面（请求的主要资源）相关。

tilde我所知道的 JS 中没有内置功能。通常的方法是定义一个 JavaScript 变量来指定基本路径：

<script type="text/javascript">

  directory_root = "http://www.example.com/resources";

</script>

并在您动态分配 URL 时引用该根。

对根进行硬编码在您的开发箱、测试服务器等上不起作用。
2021-04-11 18:44:09

对于我正在开发的 MVC4 应用程序，我在 _Layout.cshtml 中放置了一个脚本元素，并为所需的路径创建了一个全局变量，如下所示：

<body>

<script>
    var templatesPath = "@Url.Content("~/Templates/")";
</script>

<div class="page">
    <div id="header">

       <span id="title">

        </span>
    </div>
    <div id="main">


        @RenderBody()
    </div>
    <div id="footer">
        <span></span>
    </div>
</div>

其它你可能感兴趣的问题
上一篇VueJs 2.0 从孙子组件发出事件到他的祖父组件 下一篇在 Android 上长按禁用上下文菜单