LinkedText<"/> LinkedText<">
search

Home >Web Front-end >JS Tutorial >Position windows using JavaScript or HTML

Position windows using JavaScript or HTML

PHPz
PHPzforward
2023-09-04 18:13:021127browse

使用 JavaScript 或 HTML 定位窗口

In this article, we will learn how to open a website in a new window using TARGET attribute HTML and JavaScript

HTML TARGET attribute

Use the anchor's Target property to specify the link's opening named frame or window Label. The closing tag in HTML content must appear after each opening tag Because elements are paired. Although the href (hypertext reference) element of the anchor There are several other options for the tag, it is required because it contains the page where the page is located https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 The link will disappear once clicked.

grammar

<a href="https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561" target="_top"> Linked Text </a>

Attribute value - The target window of https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 specified by the href attribute is referenced by this Attributes. It may have any of the following values ​​-

  • _top - It replaces any existing frame in order to load the web page into the browser window with full text.

  • _self - By default, _self is the default value of the target attribute. It opens the web page in the same window or frame in which the link was opened.

  • _blank - A new browser window will open after the web page loads.

  • _parent - This method loads the web page in a parent window or frameset.

The

element of HTML (which will display the content of the linked website) must have Provide the NAME attribute if you wish to load the web content into a different frame. Additionally, the element's target attribute must be specified along with the element's name. The frame whose content will be displayed.

Example

In this example, let us understand the usage of target="blank" as shown below. The web page will open Whenever the user clicks on the link text, it will be displayed in a new window. 

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <h2 style="color:rgb(6, 92, 157);">The webpage will launch in a new window after clicking the link below.</h2>
   <a href="https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21" target="_blank">Welcome to Tutorialspoint website!</a>
</body>
</html>

Using JavaScript, open in a new tab https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561

Anchor tags in HTML are a simple and straightforward way to open https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 in a new tab. This section has More information about this label. However, there are some cases where Javascript must be used to achieve Same mission. The window.open() method is useful in this case. browser based Configuration and parameter values, the window.open() method can be used to open a new window Browser window or new tab.

Strategy

  • We must use _blank in the second parameter to open a new tab using the window.open() method.

  • The value returned by window.open(). The reference returned by window.open() is either the newly generated window or tab, or null if it fails.

  • Avoid adding a third parameter to this as doing so will result in a new window being opened instead of a tab.

grammar

window.open(https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561, '_blank');

Example

In this example, let us understand how to open a link in a new tab using JavaScript (https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561) window.open() method. 

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
   <p> Once you click the button <strong>tutorialspoint.com</strong> link will launch in a new tab
   </p><br>
   <button button type="button" class="btn btn-success" onclick="openNewTab()">
      <strong>Open TutorialsPoint</strong>
   </button>
   <script>
      function openNewTab() {
         window.open(
            "https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21", "_blank");
      }
   </script>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
   <p> Click the button to learn <strong>JavaScript</strong> with
      <strong>tutorialspoint.com</strong> link, it will launch in a new tab</p><br>
   <button button type="button" class="btn btn-success" onclick="myNewTab()">
      <strong>Open TutorialsPoint</strong>
   </button>
   <script>
      function myNewTab() {
         window.open(
            "https://www.php.cn/link/1a09a1f048354ae7570bf137f30abd21javascript/index.htm", "_blank");
      }
   </script>
</body>
</html>

Introduction

In HTML, you must include the https://www.php.cn/link/886ad506e0c115cf590d18ebb6c26561 in the href attribute of the anchor Use this element if you want to direct users to another website. If you want the link to open in a new window In the browser window, you must also include the target.

You can accomplish the same task in JavaScript using the window.open() method. even While we can also do this using HTML, the JavaScript option is beneficial.

The above is the detailed content of Position windows using JavaScript or HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Quick tip: Leverage the power of jQuery to extract data from XML filesNext article：Quick tip: Leverage the power of jQuery to extract data from XML files

Related articles

See more