如何在javascript中获取基本url_Javascript_Php_Html_Css_Codeigniter

如何在javascript中获取基本url

javascript php html css codeigniter

如何在javascript中获取基本url,javascript,php,html,css,codeigniter,Javascript,Php,Html,Css,Codeigniter,我正在建立一个网站，我有各种各样的资源，我加载的助手功能如下产生（即www.mysite.com）然后，我可以像这样用javascript将此资源与另一个资源交换 $（'#style_color'）.attr（“href”，“assets/css/themes/”+color_u+”.css”）发生的情况是，它将尝试在不使用php生成的绝对路径的情况下加载资源，因此我的解决方案是使用php在每个页面中添加一个伪标记，如下所示然后我将javascript行修改为 $（'#style_

我正在建立一个网站，我有各种各样的资源，我加载的助手功能如下

产生（即www.mysite.com）

然后，我可以像这样用javascript将此资源与另一个资源交换

$（'#style_color'）.attr（“href”，“assets/css/themes/”+color_u+”.css”）
发生的情况是，它将尝试在不使用php生成的绝对路径的情况下加载资源，因此我的解决方案是使用php在每个页面中添加一个伪标记，如下所示

然后我将javascript行修改为
$（'#style_color'）.attr（“href”，$（'#base_url'）.attr（“class”）+“assets/css/themes/“+color_u+”.css”）
它确实可以工作，但看起来一点也不优雅，因此，如果您能帮助我从javascript或任何其他解决方案中生成此基本url，我将不胜感激，谢谢：）

我更喜欢只使用Javascript的解决方案，因为我使用的是document.base\u url
变量，该变量包含从protocol
到index.php
的url段
document.base_url=base_url（'index.php'）
函数base\u 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('/') + '/';
}

通过在每个页面模板中生成以下行，可以使PHP和JavaScript协同工作：
<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>


document.mybaseurl=''；

然后，您可以在JavaScript中的任意位置引用document.mybaseurl。这为您节省了一些调试和复杂性，因为此变量始终与PHP计算一致。JavaScript中的基本URL
通过窗口，您可以在JavaScript中非常轻松地访问当前url。位置

您可以通过此位置
对象访问该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
，即可返回所有可用属性

可在
上进一步阅读，一种方法是使用脚本标记将您想要的变量导入视图：
<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>

这只需执行此变量即可完成
var base_url = '<?php echo base_url();?>'

现在，这将始终使用正确的路径
var path    =   "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );

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

要不是未来的极客，我可能会迟到。首先，我假设您想在.js
文件中调用base\u 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");
}

在上面的示例中，没有分配基本url。因此代码无法正常工作。但是可以肯定的是，您将使用
标记调用视图文件的
或
之间的.js
。因此，要在.js
文件中调用base\u 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>


要获得与codeigniter
的base\u url
完全相同的内容，您可以执行以下操作：
var base_url = window.location.origin + '/' + window.location.pathname.split ('/') [1] + '/';

如果您使用纯Javascript文件，这将更加有用。
在参考资料/views/layouts/app.blade.php文件中
<script type="text/javascript">
    var baseUrl = '<?=url('');?>';
</script>


var baseUrl=''；
如果您想要网页中确切指定的内容，只需使用：
document.querySelector('head base')['href']

假设您拥有全局脚本文件，并且不希望在其他文件中重复定义该URL。这就是基本URL的作用所在
在global_script.js文件中，执行以下操作
<script>
 var BASE_URL = "http://localhost:8000";
</script>


var BASE_URL=”http://localhost:8000";

然后，您可以在其他任何地方使用该变量来调用您的URL。例如
<script>
   fetch(`{{BASE_URL}}/task-create/`,{
         ..............
            
        }).then((response) => {
            .............
   })
</script>


获取（`{BASE_URL}}}/task create/`{
..............
})。然后（（响应）=>{
.............
})
我正在使用相同的东西，但我正在使用隐藏的只读字段来存储基本url（），因为我在将其传入类名时遇到了一些问题。我不明白为什么要添加一个带有基本url的类，您可以阅读此文以了解如何在js中获取基本url。浏览器与此兼容如何？某些浏览器（或旧浏览器）是否可能会失败？这应该是跨浏览器的，因为服务器端脚本消除了这些差异。这段代码可能不是“可移植的”，这意味着在移动服务器时可能需要调整路径前缀。我不相信这个答案是正确的。base_url是在php（服务器端）中定义的，如何在JS/客户端中获得？@PC.base_url
（在本例中）只是我的变量名。它可以是baseURL
，urlBase，或者任何东西。
document.querySelector('head base')['href']

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

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