如何在javascript中获取基本网址

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或任何其他解决方案中生成此基本url提供任何帮助，谢谢:)

我更喜欢仅使用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控制台，它将返回所有可用的属性。