Τοποθεσία παραθύρου JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Το αντικείμενο window.location μπορεί να χρησιμοποιηθεί για τη λήψη την τρέχουσα διεύθυνση σελίδας (URL) και να ανακατευθύνει το πρόγραμμα περιήγησης σε μια νέα σελίδα.

Θέση παραθύρου

Το αντικείμενο window.location μπορεί να γραφτεί χωρίς το πρόθεμα παραθύρου.

Μερικά παραδείγματα:

  • Το window.location.href επιστρέφει το href (URL) της τρέχουσας σελίδας

  • Το window.location.hostname επιστρέφει το όνομα τομέα του κεντρικού υπολογιστή web

  • Το window.location.pathname επιστρέφει τη διαδρομή και το όνομα αρχείου της τρέχουσας σελίδας

  • Το window.location.protocol επιστρέφει το πρωτόκολλο ιστού που χρησιμοποιήθηκε (http:ή https:)

  • window.location.assign() φορτώνει ένα νέο έγγραφο

Θέση παραθύρου Href

Η ιδιότητα window.location.href επιστρέφει τη διεύθυνση URL της τρέχουσας σελίδας.

Παράδειγμα

Εμφάνιση του href (URL) της τρέχουσας σελίδας:

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

Το αποτέλεσμα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>

Όνομα κεντρικού υπολογιστή τοποθεσίας παραθύρου

Η ιδιότητα window.location.hostname επιστρέφει το όνομα του κεντρικού υπολογιστή Διαδικτύου (της τρέχουσας σελίδας).

Παράδειγμα

Εμφάνιση του ονόματος του κεντρικού υπολογιστή:

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

Το αποτέλεσμα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Page hostname is: " + window.location.hostname;
</script>

</body>
</html>

Όνομα διαδρομής τοποθεσίας παραθύρου

Η ιδιότητα window.location.pathname επιστρέφει το όνομα διαδρομής του την τρέχουσα σελίδα.

Παράδειγμα

Εμφάνιση του ονόματος διαδρομής της τρέχουσας διεύθυνσης URL:

 document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

Το αποτέλεσμα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>

</body>
</html>

Πρωτόκολλο τοποθεσίας παραθύρου

Η ιδιότητα window.location.protocol επιστρέφει το πρωτόκολλο ιστού της σελίδας.

Παράδειγμα

Εμφάνιση του πρωτοκόλλου Ιστού:

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

Το αποτέλεσμα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>

</body>
</html>

Θύρα τοποθεσίας παραθύρου

Η ιδιότητα window.location.port επιστρέφει τον αριθμό του κεντρικού υπολογιστή Διαδικτύου θύρα (της τρέχουσας σελίδας).

Παράδειγμα

Εμφάνιση του ονόματος του κεντρικού υπολογιστή:

document.getElementById("demo").innerHTML =
"Port 
  number is " + window.location.port;

Το αποτέλεσμα είναι:

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<p><b>Note: </b>If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>

<script>
document.getElementById("demo").innerHTML = 
"The URL port number of the current page is: " + window.location.port;
</script>

</body>
</html>

Τα περισσότερα προγράμματα περιήγησης δεν εμφανίζουν προεπιλεγμένους αριθμούς θύρας (80 για http και 443 για https)

Αντιστοίχιση τοποθεσίας παραθύρου

Η μέθοδος window.location.assign() φορτώνει ένα νέο έγγραφο.

Παράδειγμα

Φόρτωση νέου εγγράφου:

<html>
<head>
<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
 }
</script>
</head>
<body>

<input type="button" value="Load new document"
onclick="newDoc()">

</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>