【问题标题】：how to get the base url in javascript如何在javascript中获取基本url
【发布时间】：2014-02-10 09:06:20
【问题描述】：

我正在用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('/') + '/';
}

【问题讨论】：

我使用的是相同的东西，但我使用隐藏的只读字段来存储 base_url() 因为我在类名中传递它时遇到了一些问题。
我不明白你为什么要添加一个带有base_url的类，你可以阅读这篇文章来了解如何在js中获取base_url stackoverflow.com/questions/1420881/…

标签： javascript php html css codeigniter

【解决方案1】：

JavaScript 中的基本 URL

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

您可以通过此 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 开发工具中，您只需在控制台中输入 window.location，它就会返回所有可用的属性。

更多阅读请访问this Stack Overflow thread

【讨论】：

我不相信这个答案是正确的。 base_url是在php中定义的（服务器端），在js/client端怎么弄？
@PC。 base_url（在此示例中）只是我的变量的名称。可以是baseURL、urlBase 或其他任何东西。

【解决方案2】：

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

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

JavaScript 中的基本网址

这是您的项目在 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】：

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

【讨论】：

【解决方案5】：

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

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

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

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

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

【讨论】：

浏览器与此的兼容性如何？是否有可能某些浏览器（或较旧的浏览器）可能会失败？
这应该是跨浏览器的，因为差异已被服务器端脚本消除。此代码可能不是“可移植的”，这意味着您可能需要在移动服务器时调整路径前缀。

【解决方案7】：

要获得与codeigniter 中的base_url 完全相同的内容，您可以这样做：

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

sample.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。因此代码不会正常工作。但可以肯定的是，您将在<head></head> 或<body></body>of 之间调用.js 使用<script> </script> 标签查看文件。所以要在.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 文件中使用。希望对您有所帮助。

【讨论】：

【解决方案10】：

在 resources/views/layouts/app.blade.php 文件中

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

【讨论】：

【解决方案11】：

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

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

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

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

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

【讨论】：