如何在javascript中获取基本URL

Question

我正在使用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或任何其他解决方案中生成这个基本网址,谢谢:)

---

我更喜欢仅使用Javascript的解决方案,因为我使用的是CodeIgniter,一个document.base_url带有url段的变量protocol从而index.php显得很方便

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('/') + '/';
}

Answer 1

JavaScript中的基本URL

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

您可以通过此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您的控制台即可返回所有可用属性.

此Stack Overflow线程提供了进一步的读取

Answer 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");

Answer 3

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

Answer 4

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

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

Answer 5

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