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

Question

鉴于我在以下页面上：

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

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

Answer 1

// 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

Answer 2

获取主机名： location.hostname

但是您的示例也在寻找该方案，因此location.origin似乎可以在 Chrome 中执行您想要的操作，但在 Mozdev 文档中没有提及。 你可以用

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

如果您还需要端口号（当它不是 80 时），则：

location.protocol + '//' + location.host

Answer 3

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

window.location.origin

---

浏览器兼容性

桌面

铬合金	边缘	火狐（壁虎）	IE浏览器	歌剧	Safari (WebKit)
（是的）	（是的）	（是的）	（是的）	（是的）	（是的）
30.0.1599.101（可能更早）	?	21.0 (21.0)	11	?	7（可能更早，请参阅 webkit 错误 46558）

移动的

安卓	边缘	火狐移动版（壁虎）	IE电话	歌剧手机	Safari 移动版
（是的）	（是的）	（是的）	（是的）	（是的）	（是的）
30.0.1599.101（可能更早）	?	21.0 (21.0)	?	?	7（可能更早，请参阅 webkit 错误 46558）

所有浏览器兼容性均来自Mozilla Developer Network

Answer 4

let path = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;

Answer 5

这应该有效：

window.location.hostname

Answer 6

你可以尝试这样的事情：

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

Answer 7

根据您的需要，您可以使用window.location属性之一。 在您的问题中，您询问的是host ，可以使用window.location.hostname （例如www.example.com ）检索。 在你的例子中，你展示了一些叫做origin 的东西，它可以使用window.location.origin （例如http://www.example.com ）进行检索。

var path = window.location.origin + "/";

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

Answer 8

我喜欢这个取决于目的

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

您可以将其应用于任何 url-string

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"

Answer 9

使用前请记住窗口和位置

1.在客户端渲染中使用窗口和位置（注意：不要在ssr 中使用）

window.location.host; 

或者

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

2.服务端渲染

如果您使用 nuxt.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();

笔记 ：

您手动检查示例 ssr 渲染的 csr 和 ssr 应用程序

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