如何从当前页面使用JavaScript获取主机URL

鉴于我在下面这一页

http://www.webmail.com/pages/home.aspx

如何用JavaScript检索主机名("http://www.webmail.com") ?

315687 次浏览
小开

获取主机名:location.hostname

但是你的例子也在寻找方案，所以location.origin似乎在Chrome中做了你想要的事情，但在Mozdev文档中没有提到。你可以用

location.protocol + '//' + location.hostname

如果你也想要端口号(当它不是80时)，那么:

location.protocol + '//' + location.host
小开
最佳答案 
// will return the host name and port
var host = window.location.host;

或可能

var host = window.location.protocol + "//" + window.location.host;

或者如果你喜欢串联

var protocol = location.protocol;
var slashes = protocol.concat("//");
var host = slashes.concat(window.location.host);


// or as you probably should do
var host = location.protocol.concat("//").concat(window.location.host);


// the above is the same as origin, e.g. "https://stackoverflow.com"
var host = window.location.origin;

如果你有或期望有自定义端口，请使用window.location.host而不是window.location.hostname

小开

这应该可以工作:

window.location.hostname
小开

您可以使用以下命令获取协议、主机和端口:

window.location.origin

浏览器兼容性

桌面

铬 边缘 Firefox(壁虎) Internet Explorer 歌剧 Safari (WebKit)
(是的) (是的) (是的) (是的) (是的) (是的)
30.0.1599.101(可能更早) ? 21.0 (21.0) 11 ? 7(可能更早，见webkit bug 46558)
< / div >

移动

安卓 边缘 火狐移动版(Gecko) 即电话 Opera移动 Safari移动
(是的) (是的) (是的) (是的) (是的) (是的)
30.0.1599.101(可能更早) ? 21.0 (21.0) ? ? 7(可能更早，见webkit bug 46558)

所有浏览器兼容性都来自Mozilla开发者网络

小开

我喜欢这个，取决于目的

window.location.href.split("/")[2] == "localhost:17000" //always domain + port

你可以在任何url字符串上应用它

var url = "http://localhost:17000/sub1/sub2/mypage.html?q=12";
url.split("/")[2] == "localhost:17000"
url.split("/")[url.split("/").length-1] == "mypage.html?q=12"

移除协议，域&url-string中的路径(相对路径)

var arr = url.split("/");
if (arr.length>3)
"/" + arr.splice(3, arr.length).join("/") == "/sub1/sub2/mypage.html?q=12"
小开 
let path = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
小开
根据您的需要，您可以使用window.location属性之一。 在你的问题中，你问的是宿主，它可以使用window.location.hostname(例如www.example.com)检索。在你的例子中，你显示的东西被称为起源，它可以使用window.location.origin(例如http://www.example.com)检索。< / p > 
var path = window.location.origin + "/";


//result = "http://localhost:60470/"
小开

在使用窗口和位置之前请记住

1.在客户端渲染中使用窗口和位置(注意:不要在ssr中使用) < / >强

window.location.host;

或

var host = window.location.protocol + "//" + window.location.host;

2.服务器端渲染

如果你使用nuext .js(vue)或next.js(react)，请参考文档

对于nuxt js框架

req.headers.host

代码:

async asyncData ({ req, res }) {
if (process.server) {
return { host: req.headers.host }
}

路由器代码:

export function createRouter (ssrContext) {






console.log(ssrContext.req.headers.host)
return new Router({
middleware: 'route',
routes:checkRoute(ssrContext),
mode: 'history'
})
}

对于next.js框架

Home.getInitalProps = async(context) => {
const { req, query, res, asPath, pathname } = context;
if (req) {
let host = req.headers.host // will give you localhost:3000
}
}

对于node.js用户

var os = require("os");
var hostname = os.hostname();

或

request.headers.host

对于laravel用户

public function yourControllerFun(Request $request) {


$host = $request->getHttpHost();


  



dd($host);


}

或

直接在web.php中使用

Request::getHost();

注意:

你手动检查CSR和SSR应用程序 例子 ssr呈现< / p > 

if(req.server){
host=req.host;
}
if(req.client){
host=window.location.host;
}
小开

你可以尝试这样做:

1. Get the full URL:


window.location


2. Get the only protocol:


window.location.protocol


3. Get the host:


window.location.host


4. Get the host and protocol:


window.location.origin


5. Get pathname or directory without protocol and host:


var url = 'http://www.example.com/somepath/path2/path3/path4';
    

var pathname = new URL(url).pathname;
    

alert(pathname);

提交答案