当前位置：极客教程 > JavaScript > JavaScript 教程 > JavaScript中的窗口位置

JavaScript中的窗口位置

JavaScript中的窗口位置

Window.location用于为location对象提供关于文档当前位置的详细信息。这个Location对象反映了它链接到的对象的位置(URL)，也就是说，它保存了关于当前内容位置的信息(host, href等)

JavaScript的Location对象

Window.location属性表示该窗口中显示的页面的URL。

由于窗口位于作用域链的顶部，因此window. js是一个函数。位置属性可以在没有窗口前缀的情况下访问。使用window对象的location属性，你可以获得页面的URL、主机名、协议等。

Javascript的window.location.href属性

  • location对象的href属性包含当前网页的URL。
  • 通过修改href属性，用户可以访问新的URL或页面。
  • 它向历史记录列表中添加了一个条目(这样当用户点击“Back”按钮时，就可以返回到当前页面)。
  • 更新href属性比使用assign()函数更快、更容易。
  • 调用函数比访问属性慢。

语法:

下面的语法展示了javascript的windows.href.location工作过程。

window.location.href = 'https://www.geek-docs.com';
  • “window.location。href函数用来显示当前的URL路径。我们可以看到网站和html文件的路径。

示例

下面的例子使用javascript方法显示了窗口位置的href值。

示例1：

下面的例子展示了文件在运行中的浏览器中的路径。我们可以使用“innerHTML”函数看到窗口位置的URL链接。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<p id = "value"> </p>
<script>
document.getElementById("value").innerHTML = 
"The full windows href URL of the page is:<br>" + window.location.href;
</script>
</body>
</html>

输出：

给定的输出显示了当前的url链接。

JavaScript中的窗口位置

示例2

下面的例子展示了文件在运行中的浏览器中的路径。它使用onclick函数和按钮显示当前的href链接。我们可以使用警告框看到URL链接。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<button onclick = "getLocation()">
Get Href URL
</button>
<script>
function getLocation() {
// Get the current location
var location_var = window.location.href;
alert(location_var);
}
</script>
</body>
</html>

输出：

给定的输出显示了使用javascript函数的当前href链接。

输出1

JavaScript中的窗口位置

输出2

JavaScript中的窗口位置

JavaScript位置属性

我们可以使用JavaScript函数来使用windows的位置属性。我们可以得到路径、文件名、端口号等文件和url相关信息。我们可以看到根据用户需求获取位置属性的多种函数或方法。

  • Location.protocol

Javascript的位置。protocolis用来显示给定URL的协议方案，包括最后的冒号(:)符号。http:和https:是javascript中的位置协议的例子。

语法

下面的语法用于url的返回协议。

window.location.protocol
  • 网站名称或文件路径名是必需的协议，这种语法用于显示协议。

下面的例子展示了JavaScript位置协议的其他属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location protocol </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
// Prints protocol such as http: or https:
document.getElementById("value").innerHTML ="URL Path:+window.location.protocol + "<br>";
}
</script>
</body>
</html>

输出

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • JavaScript定位主机名和hostname属性

Javascript位置。显示为所需或可用的主机号。Javascript位置。Hostname用于获取所需或可用的主机名。

“localhost:8080″是URL的位置主机的一个例子。“www.javatpoint.com”是本地主机名的一个例子。

语法

下面的语法用于返回主机值。

window.location.host

下面的语法用于返回主机名。

window.location.hostname
  • 简单的语法用于显示文件路径或url的localhost。
  • 网站名或文件路径名以主机名的形式显示。

显示JavaScript位置主机名的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location hostname property </title>
</head>
<body>
<h2> JavaScript Location host and hostname </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<p id = "value1"></p>
<script>
function newDocument() {
// Prints host with a usable port such as a localhost:8080
document.getElementById("value").innerHTML = " URL host with port: " +window.location.host + "<br>";
// Prints hostname such as a www.javatpoint.com
document.getElementById("value1").innerHTML = " URL hostname with port: " +window.location.hostname + "<br>";
}
</script>
</body>
</html>

输出：

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • JavaScript位置端口

Javascript的位置。port显示可用URL的端口号。8080或8085是windows位置端口的一个例子。

语法

下面的语法用于显示url的位置端口。

window.location.port

显示JavaScript位置主机名的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location port </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
         // Prints port number, e.g. 8080
document.getElementById("value").innerHTML = " URL port: " +window.location.port+ "<br>";
}
</script>
</body>
</html>

输出：

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.pathname

Javascript的位置。路径名包括一个初始的/，后面跟着URL的给定路径。“/js/index.html”是位置路径名的一个例子。

语法：

下面的语法和返回值显示为路径值。

window.location.pathname

显示JavaScript位置路径名的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Path </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = " Path: " +window.location.pathname + "<br>";
}
</script>
</body>
</html>

输出：

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.hash

Javascript的位置。Hash给出一个给定的字符串。它包含一个#，后跟可用URL的片段标识符。

语法：

给定的语法用于显示url中包含的哈希值。

window.location.hash

显示JavaScript位置路径名的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Hash</h2>
<p><a id="jtp" href="file:///G:/writing%20stuff/content-writing/JavaTpoint/2022/nov/file.html#seee_hash_data">
JavaScript Location Hash
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Hash data of the URL is: " + url_data.hash;
</script>
</body>
</html>

输出：

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.origin

Javascript的位置。Origin是一个字符串，包含了特定位置的Origin的规范形式。

http://localhost:8080是默认情况下javascript位置的演示示例。

下面的例子展示了JavaScript位置的origin格式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Origin </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = "Origin: " +window.location.origin + "<br>";
}
</script>
</body>
</html>

输出：

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.username

Javascript的位置。Username是一个字符串，在域名之前包含用户名。

“url.username”是用来通过javascript获取预定义URL值的用户名。

显示JavaScript位置用户名的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Username</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Username of the URL is: " + url_data.username;
</script>
</body>
</html>

输出:

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.password

Javascript的Location.Password是一个字符串，显示在域名之前指定的密码。

显示JavaScript位置密码的示例如下。

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Password</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The password of the URL is: " + url_data.password;
</script>
</body>
</html>

输出:

给出的输出显示了url属性的值。

JavaScript中的窗口位置

  • Location.search

Javascript的位置。searchis是一个字符串，显示给定URL的查询字符串:

“?type=listing&answer=no”

显示JavaScript位置密码的示例如下。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Search</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com/?yes">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Location search of the URL is: " + url_data.search;
</script>
</body>
</html>

输出:

给出的输出显示了url属性的值。

JavaScript中的窗口位置

位置属性示例

下面的例子展示了JavaScript位置的所有属性。在这里，我们可以使用javascript函数看到文件路径的所有位置属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location property </h2>
    <h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
    // Prints complete file URL
    document.write(" full url path: " +window.location.href + "<br>");
    // Prints protocol such as http: or https:
    document.write(" URL Path: <br>" +window.location.protocol + "<br>"); 
    // Prints hostname with a usable port such as a localhost:8080
    document.write(" URL hostname with port: " +window.location.host + "<br>");  
    // Prints hostname such as localhost or www.javatpoint.com
    document.write(" url hostname: " +window.location.hostname + "<br>");
     // Prints port number, e.g. 8080
    document.write(" port: " +window.location.port + "<br>");
     // Prints pathname 
    document.write(" url pathname: " +window.location.pathname + "<br>"); 
     // Prints query string 
    document.write(" full url search: " +window.location.search + "<br>");
    // Prints fragment identifier
    document.write(" full url identifier: " +window.location.hash);
}
    </script>
    </body>
</html>

输出:

给出的输出显示了url属性的值。

JavaScript中的窗口位置

操作Javascript位置

对location的操作用于根据用户需求获取所需的url或文件路径。对位置的操作使用三个方法，即assign()，reload()和replace()。这个方法与JavaScript函数和事件一起工作。

  • JavaScript的Assign()方法

assign()方法用于取得一个URL，并在页面中导航URL路径。它用于将url路径添加到浏览器的历史堆栈中。

语法:

下面的语法用于指定所需的URL。

window.location.assign("URL")
  • “window.location.assign”函数用于获取所需的URL路径。
  • 我们可以放置文件或网站的路径或url链接。

给定的示例指定了给定的和必需的URL。在这里，我们可以使用带有onclick函数的按钮来显示分配的url。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.assign("https://www.javatpoint.com")
}
</script>
</body>
</html>

输出:

给定的输出图像显示了指定的url。

Output1

JavaScript中的窗口位置

Output1

JavaScript中的窗口位置

  • Javascript中的replace()方法

replace()模式和assign()是有关联的，只不过它不会创建一个新的历史栈条目。因此，你不能使用后退按钮返回。这个函数显示新的url或从旧url中替换的url。

语法

下面的语法用来替换所需的URL。

Window.location.replace("URL")
  • “window.location。替换”函数用于获取新的URL路径。
  • 我们可以使用简单的javascript方法将路径或url链接从旧的替换为新的。

给定的示例将替换给定的必填项URL。在这里，我们可以使用带有onclick函数的按钮，从旧url获取新url。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location replace object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.replace("https://www.javatpoint.com")
}
</script>
</body>
</html>

输出

输出图像显示的是替换后的url。

Output1

JavaScript中的窗口位置

Output1

JavaScript中的窗口位置

  • Javascript中的reload()方法

reload()方法用于重新加载页面。当你不带参数调用reload()时，浏览器将以最有效的方法重新加载页面，如果页面资源自上次请求以来没有更改，则从缓存中加载页面资源。

语法

下面的语法用于重新加载所需的URL。

location.reload();
  • 函数location.reload()重新加载url并显示一个空白页面。
  • 它不需要任何文件路径或当前url

给定的示例会重新加载给定的必需URL。我们可以使用javascript的onclick函数重新加载页面。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The location.reload object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
location.reload();
}
</script>
</body>
</html>

输出

给定的输出显示reload url。

JavaScript中的窗口位置

总结

location对象包含一个页面的URL。可以使用window访问它。Location或document.location。

Location对象具有表示URL的特征，如协议、路径名、主机和搜索。要操作位置，设置其属性并使用assign()、replace()和reload()。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 教程