JavaScript 如何在同一窗口和同一标签中打开URL
在同一窗口和同一标签中打开URL是Web开发者的常见需求。当你想将新的网页或文档加载到当前浏览器窗口并替换当前网页内容时,这个功能非常有用。
有几种使用JavaScript在同一窗口和同一标签中打开URL的方法。
方法1:使用window.location.replace()方法: window.location.replace()方法用于在当前窗口中加载一个新的网页或文档,替换当前的文档。这是打开URL在同一窗口和同一标签中最常用的方法之一。
语法:
window.location.replace(url);
参数: “url”是您希望在同一窗口和同一选项卡中加载的URL。
示例: 在本示例中,我们使用了window.location.replace()方法在同一窗口和同一选项卡中打开“geeksforgeeks.org”的URL。当单击按钮时,会调用SameTab()函数,该函数使用window.location.replace()方法在同一窗口和同一选项卡中加载URL。
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Open URL in same window
and in same tab
</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<p>
Click the button to open <br />
<b style="color:green; font-size:2rem">
geeksforgeeks.org
</b>
<br />
in same window & same tab <br />
</p>
<button onclick="SameTab()">
Open using window.location.replace()
</button>
<script>
function SameTab() {
window.location.replace(
"https://www.geeksforgeeks.org");
}
</script>
</body>
</html>
输出:
方法2: 使用 window.location.href 属性: 使用 window.location.href 属性在同一窗口和同一标签页中打开一个URL。
语法:
window.location.href = url;
参数: “url” 是您要在同一窗口和同一标签中加载的URL。
示例: 在这个例子中,我们使用了 window.location.href 属性来在同一窗口和同一标签中打开 “geeksforgeeks.org” 的URL。当按钮被点击时,会调用SameTab()函数,该函数将 window.location.href 属性设置为所需的URL,从而将其加载到相同的窗口和标签中。
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Open URL in same window
and in same tab
</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<p>
Click the button to open <br />
<b style="color:green; font-size:2rem">
geeksforgeeks.org
</b>
<br />
in same window & same tab <br />
</p>
<button onclick="SameTab()">
Open using window.location.href
</button>
<script>
function SameTab() {
window.location.href =
"https://www.geeksforgeeks.org";
}
</script>
</body>
</html>
输出:
方法3: 使用window.open()方法: 使用 “window.open()” 方法在相同的窗口和相同的标签中打开一个URL。
语法:
window.open(url, "_self");
参数:
- “url” 是您希望在同一个窗口和同一个标签页中加载的URL。
- “_self” 参数指定URL应在当前窗口中加载。
例子: 在这个例子中,我们使用window.open()方法在同一个窗口和同一个标签页中打开”geeksforgeeks.org”的URL。当点击按钮时,将调用sameTab()函数,该函数使用window.open()方法和_self参数在同一个窗口和同一个标签页中加载URL。
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Open URL in same window
and in same tab
</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<p>
Click the button to open <br />
<b style="color:green; font-size:2rem">
geeksforgeeks.org
</b>
<br />
in same window & same tab <br />
</p>
<button onclick="SameTab()">
Open using window.open()
</button>
<script>
function SameTab() {
window.open(
"https://www.geeksforgeeks.org",
"_self"
);
}
</script>
</body>
</html>
输出:
结论: 所有三种方法都是可行的,并且都有各自的用例。如果您想用新的文档替换当前文档, location.replace() 方法很有用,而 location.href 属性很有用,如果您想要更改当前文档的URL。使用 window.open() 方法,并使用 _self 参数,可在同一窗口和同一标签中打开URL很有用。