location.host 与 location.hostname 以及跨浏览器兼容性?
与检查用户代理是否通过正确的域访问相比,其中哪一项最有效。
如果他们使用某种 Web 代理访问域(因为它往往会破坏 js),我们希望显示一个基于 js 的小型“顶栏”样式警告。
我们正在考虑使用以下内容:
var r = /.*domain\.com$/;
if (r.test(location.hostname)) {
// showMessage ...
}
这将照顾我们曾经使用过的任何子域。
我们应该使用主机或主机名哪个?
在 Firefox 5 和 Chrome 12 中:
console.log(location.host);
console.log(location.hostname);
.. 两者显示相同。
这是因为该端口实际上不在地址栏中吗?
W3Schools 表示主机包含端口。
是否应该验证 location.host/hostname,或者我们可以确定它在 IE6+ 和所有其他浏览器中会存在吗?
Which one of these is the most effective vs checking if the user agent is accessing via the correct domain.
We would like to show a small js based 'top bar' style warning if they are accessing the domain using some sort of web proxy (as it tends to break the js).
We were thinking about using the following:
var r = /.*domain\.com$/;
if (r.test(location.hostname)) {
// showMessage ...
}
That would take care of any subdomains we ever use.
Which should we use host or hostname?
In Firefox 5 and Chrome 12:
console.log(location.host);
console.log(location.hostname);
.. shows the same for both.
Is that because the port isn't actually in the address bar?
W3Schools says host contains the port.
Should location.host/hostname be validated or can we be pretty certain in IE6+ and all the others it will exist?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
作为一个小备忘录:交互式链接剖析
——
简而言之(假设一个位置
http://example.org:8888/foo/bar#bang
):hostname
为您提供example.org
host< /code> 为您提供
example.org:8888
As a little memo: the interactive link anatomy
--
In short (assuming a location of
http://example.org:8888/foo/bar#bang
):hostname
gives youexample.org
host
gives youexample.org:8888
如果指定了主机,则主机仅包含端口号。如果 URL 中没有明确指定端口号,则返回与主机名相同的值。您可以选择是否愿意匹配端口号。请参阅 https://developer.mozilla.org/en-US/docs/ Web/API/Location 了解有关
window.location
对象及其用于匹配的各种选择(带或不带端口)的更多信息。我假设您希望主机名只是获取站点名称。
host just includes the port number if there is one specified. If there is no port number specifically in the URL, then it returns the same as hostname. You pick whether you care to match the port number or not. See https://developer.mozilla.org/en-US/docs/Web/API/Location for more info on the
window.location
object and the various choices it has for matching (with or without port).I would assume you want hostname to just get the site name.
如果您坚持使用
window.location.origin
您可以在阅读
origin
之前将其放在代码顶部解决方案
PS:郑重声明,这实际上是最初的问题。已经编辑过了:)
If you are insisting to use the
window.location.origin
You can put this in top of your code before reading the
origin
Solution
PS: For the record, it was actually the original question. It was already edited :)
您的主要问题已在上面得到解答。我只是想指出您使用的正则表达式有一个错误。它也将在
foo-domain.com
上成功,它不是domain.com
的子域,您真正想要的是:
Your primary question has been answered above. I just wanted to point out that the regex you're using has a bug. It will also succeed on
foo-domain.com
which is not a subdomain ofdomain.com
What you really want is this:
只是添加一个注释,Google Chrome 浏览器具有该位置的 origin 属性。这为您提供了从协议到端口号的整个域,如下面的屏幕截图所示。
Just to add a note that Google Chrome browser has origin attribute for the location. which gives you the entire domain from protocol to the port number as shown in the below screenshot.
MDN:https://developer.mozilla.org/en/DOM/window.location
似乎两者都会得到相同的结果,但
hostname
包含明确的主机名,不带括号或端口号。MDN: https://developer.mozilla.org/en/DOM/window.location
It seems that you will get the same result for both, but
hostname
contains clear host name without brackets or port number.从 mdn 网络文档中,您可以看到交互式位置演示 您可以将鼠标悬停在元素上以突出显示其含义:
From the mdn web docs you can see an interactive location demo where you can hover over the elements to highlight their meaning: