堆栈内存溢出
  繁体   English   中英

如何在javascript中获取基本网址

[英]how to get the base url in javascript

 原文  2014-01-21 00:19:52  7   11    javascript/ php/ html/ css/ codeigniter

问题描述

我正在使用CodeIgniter构建一个网站，我使用base_url辅助函数加载了各种资源，如下所示

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

产生（即 www.mysite.com）

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>

然后我可以像这样用javascript中的另一个资源交换这个资源

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

发生的情况是它会尝试在不使用 php 生成的绝对路径的情况下加载资源，所以我的解决方案是在每个带有 php 的页面中添加一个虚拟标签，如下所示

<div id="base_url" class="'.base_url().'"></div>

然后我将 javascript 行修改为

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

它确实有效，但它看起来一点也不优雅，因此，我将不胜感激有关如何从 javascript 或任何其他解决方案中生成此基本 url 的任何帮助，谢谢:)

我更喜欢只使用 Javascript 的解决方案，因为我使用的是CodeIgniter ，一个document.base_url变量，其中包含从protocol到index.php的 url 段似乎很方便

document.base_url = base_url('index.php');

函数base_url()是

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the origin plus the path to the segment
   return window.location.origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}

11 个解决方案

解决方案1
 190 已采纳  2014-01-21 00:31:23

JavaScript 中的基本 URL

您可以使用window.location在 JavaScript 中轻松访问当前 url

您可以通过此locations对象访问该 URL 的段。 例如：

// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.origin;
// "http://stackoverflow.com"

var host = window.location.host;
// stackoverflow.com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

在 Chrome Dev Tools 中，您只需在控制台中输入window.location即可返回所有可用属性。

可在此 Stack Overflow 线程上进一步阅读

解决方案2
 9  2014-01-21 00:33:06

一种方法是使用脚本标签将您想要的变量导入到您的视图中：

<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>

在这里，我用 json_encode 包装了 base_url，以便它会自动将任何字符转义为有效的 Javascript。 我将 base_url 放在全局窗口中，因此您可以通过调用 base_url 在任何地方使用它，但请确保将脚本标记放在调用它的任何 Javascript 之上。 用你给出的例子：

...
$('#style_color').attr("href", base_url + "assets/css/themes/" + color_ + ".css");

解决方案3
 6  2016-07-18 03:13:25

JavaScript 中的基本 URL

这是您的项目在 JavaScript 中获取基本 URL 的简单函数。

// base url
function base_url() {
    var pathparts = location.pathname.split('/');
    if (location.host == 'localhost') {
        var url = location.origin+'/'+pathparts[1].trim('/')+'/'; // http://localhost/myproject/
    }else{
        var url = location.origin; // http://stackoverflow.com
    }
    return url;
}

解决方案4
 5  2015-03-07 13:22:16

var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.origin.length, 999 ) : 
    "";

解决方案5
 4  2014-01-21 07:07:54

这只需通过执行此变量即可完成。

var base_url = '<?php echo base_url();?>'

这将现在有基本网址。 现在创建一个将使用此变量的 javascript 函数

function base_url(string){
    return base_url + string;
}

现在这将始终使用正确的路径。

var path    =   "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );

解决方案6
 3  2014-01-21 00:23:46

您可以通过在每个页面模板中生成以下行来使 PHP 和 JavaScript 协同工作：

<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>

然后您可以在 JavaScript 中的任何位置引用 document.mybaseurl。 这为您节省了一些调试和复杂性，因为此变量始终与 PHP 计算一致。

解决方案7
 3  2017-10-31 11:49:35

要获得与codeigniter base_url完全相同的内容，您可以执行以下操作：

var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';

如果您处理纯 Javascript 文件，这将更有用。

解决方案8
 0  2016-09-30 10:25:10

我可能会迟到，但对于所有未来的极客来说。 首先我想你想在你的.js文件中调用 base_url 。 所以让我们考虑你在下面的示例.js文件中调用它

示例.js

var str = $(this).serialize(); 

jQuery.ajax({
type: "POST",
url: base_url + "index.php/sample_controller",
dataType: 'json',
data: str,
success: function(result) {
alert("Success");
}

上面没有分配base_url。因此代码将无法正常工作。 但是可以肯定的是，您将使用<script> </script>标记在 View 文件的<head></head>或<body></body>之间调用.js 。 因此，要在.js文件中调用base_url ，我们必须编写以下代码，您计划在其中调用.js文件。 并且建议您创建通用头文件并将以下代码和所有调用样式表（ .css ）和 javascript （ .js ）文件放在那里。 就像下面的例子。

通用头文件

<head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/sample.js">

<script>
  var base_url = '<?php echo base_url(); ?>';  
</script>


</head>

现在base_url也将在sample.js文件中工作。 希望它有所帮助。

解决方案9
 0  2018-10-24 14:27:19

在资源/视图/布局/app.blade.php文件中

<script type="text/javascript">
    var baseUrl = '<?=url('');?>';
</script>

解决方案10
 0  2019-09-05 07:49:46

如果您想要网页中确切指定的内容，只需使用：

document.querySelector('head base')['href']

解决方案11
 0  2021-01-15 11:41:39

假设您有全局脚本文件，并且不想在其他文件中重复定义该 URL。 这就是 BASE_URL 发挥作用的地方。

在您的 global_script.js 文件中，执行以下操作

<script>
 var BASE_URL = "http://localhost:8000";
</script>

然后您可以在其他任何地方使用该变量来调用您的 URL。 例如...

<script>
   fetch(`{{BASE_URL}}/task-create/`,{
         ..............
            
        }).then((response) => {
            .............
   })
</script>

暂无
暂无

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

相关问题 JavaScript：如何获取绝对的基本URL？ 如何从 JavaScript 中的 URL 获取基域 如何使用 jquery 或 javascript 获取基本 url？ 如何在javascript中使用正则表达式获取基本URL 如何获取除基本 URL 之外的 URL 中的值 - Javascript 如何使用javascript获取MVC应用程序的基本URL 使用JavaScript获取我的Web App基本URL 使用正则表达式和 Javascript 从字符串中获取基本 url 如何在meanjs中获取基本URL？ 如何在 reactjs 中获取当前 url 和基本 url？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM