Thêm JavaScript vào URL

Nếu bạn muốn chạy cùng một JavaScript trên một số trang trong một trang web, bạn nên tạo một tệp JavaScript bên ngoài, thay vì viết đi viết lại cùng một tập lệnh. Lưu tệp tập lệnh bằng một. js, sau đó tham khảo nó bằng cách sử dụng thuộc tính

javascript:alert("Hello World!")
00 trong
javascript:alert("Hello World!")
01

Một cách khác mà mã JavaScript có thể được đưa vào phía máy khách là trong một URL sau javascript. trình xác định giả giao thức. Loại giao thức đặc biệt này chỉ định rằng phần thân của URL là mã JavaScript tùy ý sẽ được trình thông dịch JavaScript diễn giải. Nếu mã JavaScript trong javascript. URL chứa nhiều câu lệnh, các câu lệnh phải được phân tách với nhau bằng dấu chấm phẩy. Một URL như vậy có thể trông giống như sau

javascript:var now = new Date(); "The time is:" + now;

Khi trình duyệt "tải" một trong các URL JavaScript này, trình duyệt sẽ thực thi mã JavaScript có trong URL và hiển thị "tài liệu" được URL tham chiếu. "Tài liệu" này là giá trị chuỗi của câu lệnh JavaScript cuối cùng trong URL. Chuỗi này sẽ được định dạng và hiển thị giống như bất kỳ tài liệu nào khác được tải vào trình duyệt

Thông thường hơn, một URL JavaScript sẽ chứa các câu lệnh JavaScript thực hiện các hành động nhưng không trả về giá trị nào. Ví dụ

javascript:alert("Hello World!")

Khi loại URL này được "tải", trình duyệt sẽ thực thi mã JavaScript, nhưng vì không có giá trị để hiển thị dưới dạng tài liệu mới nên nó không sửa đổi tài liệu hiện được hiển thị

Lưu ý rằng trong Navigator 3. 0, bạn có thể sử dụng toán tử void để buộc một biểu thức không có giá trị. Điều này hữu ích khi bạn muốn thực hiện một câu lệnh gán, chẳng hạn, nhưng không muốn hiển thị giá trị được gán trong cửa sổ trình duyệt. (Nhớ lại rằng các câu lệnh gán cũng là các biểu thức và chúng đánh giá giá trị của vế phải của phép gán. )

jav. URL có thể được sử dụng ở bất cứ đâu bạn muốn sử dụng URL thông thường. Tuy nhiên, nó không hoàn toàn rõ ràng, tại sao bạn muốn làm như vậy. Trong Bộ điều hướng, một cách sử dụng quan trọng cho cú pháp này là nhập trực tiếp cú pháp đó vào trường Vị trí của trình duyệt, nơi cú pháp này cho phép bạn dùng thử và kiểm tra mã JavaScript tùy ý mà không cần phải mở trình chỉnh sửa và tạo tệp HTML chứa mã. Trên thực tế, Navigator còn đưa ý tưởng này đi xa hơn nữa. Như được mô tả trong Chương 1, Giới thiệu về JavaScript, nếu bạn nhập URL javascript. một mình, không có mã JavaScript theo sau nó, Bộ điều hướng hiển thị trang thông dịch JavaScript cho phép bạn nhập và thực thi tuần tự các dòng mã. Thật không may, cả hai kỹ thuật này đều không hoạt động trong Internet Explorer 3. 0

jav. URL cũng có thể được sử dụng trong các ngữ cảnh khác. Ví dụ, bạn có thể sử dụng một cái làm đích của một liên kết siêu văn bản. Sau đó, khi người dùng nhấp vào liên kết, mã JavaScript được chỉ định sẽ được thực thi. Hoặc, nếu bạn chỉ định một javascript. URL làm giá trị của thuộc tính ACTION của một

thì mã JavaScript trong URL sẽ được thực thi khi người dùng gửi biểu mẫu. Trong những bối cảnh này, javascript. URL về cơ bản là thay thế cho trình xử lý sự kiện. Trình xử lý sự kiện và javascript. Về cơ bản, các URL có thể được sử dụng thay thế cho nhau và việc bạn chọn URL nào về cơ bản là vấn đề về phong cách

Có một vài trường hợp mà một javascript. URL có thể được sử dụng với các đối tượng không hỗ trợ trình xử lý sự kiện. Ví dụ: thẻ không hỗ trợ trình xử lý sự kiện onClick() trên nền tảng Windows trong Bộ điều hướng 3. 0 (tuy nhiên, một cái sẽ được thêm vào trong bản phát hành tiếp theo). Vì vậy, nếu bạn muốn thực thi mã JavaScript khi người dùng nhấp vào bản đồ hình ảnh phía máy khách, bạn phải sử dụng javascript. URL

Internet Explorer hỗ trợ javascript. trình xác định giao thức cho URL, nhưng không có trang trình thông dịch JavaScript tích hợp sẵn đặc biệt. Phiên bản Explorer trong tương lai có thể cũng sẽ hỗ trợ vbscript. giao thức

Không có phương thức kết nối mạng nào yêu cầu chính xác một đối tượng

let url = new URL('https://javascript.info/profile/admin');
3, các chuỗi là đủ tốt. Vì vậy, về mặt kỹ thuật, chúng tôi không phải sử dụng
let url = new URL('https://javascript.info/profile/admin');
3. Nhưng đôi khi nó có thể thực sự hữu ích

Cú pháp tạo một đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 mới

new URL(url, [base])

  • let url = new URL('https://javascript.info/profile/admin');
    6 – URL đầy đủ hoặc đường dẫn duy nhất (nếu cơ sở được đặt, xem bên dưới),
  • let url = new URL('https://javascript.info/profile/admin');
    7 – một URL cơ sở tùy chọn. nếu set và đối số
    let url = new URL('https://javascript.info/profile/admin');
    6 chỉ có đường dẫn, thì URL được tạo liên quan đến
    let url = new URL('https://javascript.info/profile/admin');
    7

Ví dụ

let url = new URL('https://javascript.info/profile/admin');

Hai URL này giống nhau

javascript:alert("Hello World!")
1

Chúng tôi có thể dễ dàng tạo một URL mới dựa trên đường dẫn liên quan đến một URL hiện có

javascript:alert("Hello World!")
2

Đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 ngay lập tức cho phép chúng tôi truy cập các thành phần của nó, vì vậy đây là một cách hay để phân tích cú pháp url, e. g

javascript:alert("Hello World!")
4

Đây là trang tính dành cho các thành phần URL

  • javascript:alert("Hello World!")
    
    11 là url đầy đủ, giống như
    javascript:alert("Hello World!")
    
    12
  • javascript:alert("Hello World!")
    
    13 kết thúc bằng ký tự dấu hai chấm
    javascript:alert("Hello World!")
    
    14
  • javascript:alert("Hello World!")
    
    15 – một chuỗi tham số, bắt đầu bằng dấu chấm hỏi
    javascript:alert("Hello World!")
    
    16
  • javascript:alert("Hello World!")
    
    17 bắt đầu bằng ký tự băm
    javascript:alert("Hello World!")
    
    18
  • cũng có thể có các thuộc tính
    javascript:alert("Hello World!")
    
    19 và
    javascript:alert("Hello World!")
    
    20 nếu có xác thực HTTP.
    javascript:alert("Hello World!")
    
    21 (không vẽ ở trên, ít dùng)

Chúng ta có thể truyền các đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 cho các phương thức kết nối mạng (và hầu hết các phương thức khác) thay vì một chuỗi

Chúng ta có thể sử dụng một đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 trong
javascript:alert("Hello World!")
24 hoặc
javascript:alert("Hello World!")
25, hầu như ở mọi nơi mà chuỗi URL được mong đợi

Nói chung, đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 có thể được truyền cho bất kỳ phương thức nào thay vì một chuỗi, vì hầu hết các phương thức sẽ thực hiện chuyển đổi chuỗi, biến đối tượng
let url = new URL('https://javascript.info/profile/admin');
3 thành một chuỗi có URL đầy đủ

Giả sử chúng ta muốn tạo một url với các thông số tìm kiếm đã cho, ví dụ:

javascript:alert("Hello World!")
28

Chúng tôi có thể cung cấp chúng trong chuỗi URL

let url = new URL('https://javascript.info/profile/admin');
3

…Nhưng các thông số cần được mã hóa nếu chúng chứa khoảng trắng, các chữ cái không phải là chữ Latinh, v.v. (thêm về điều đó bên dưới)

Vì vậy, có một thuộc tính URL cho điều đó.

javascript:alert("Hello World!")
29, một đối tượng thuộc loại

Nó cung cấp các phương thức thuận tiện cho các tham số tìm kiếm

  • javascript:alert("Hello World!")
    
    40 – thêm tham số bằng
    javascript:alert("Hello World!")
    
    41,
  • javascript:alert("Hello World!")
    
    42 – xóa tham số bằng
    javascript:alert("Hello World!")
    
    41,
  • javascript:alert("Hello World!")
    
    44 – lấy tham số bằng
    javascript:alert("Hello World!")
    
    41,
  • javascript:alert("Hello World!")
    
    46 – nhận tất cả các tham số với cùng một
    javascript:alert("Hello World!")
    
    41 (điều đó có thể, e. g.
    javascript:alert("Hello World!")
    
    48),
  • javascript:alert("Hello World!")
    
    49 – kiểm tra sự tồn tại của tham số bằng
    javascript:alert("Hello World!")
    
    41,
  • let url = new URL('https://javascript.info/profile/admin');
    31 – đặt/thay thế tham số,
  • let url = new URL('https://javascript.info/profile/admin');
    32 – sắp xếp tham số theo tên, hiếm khi cần thiết,
  • …và nó cũng có thể lặp lại, tương tự như
    let url = new URL('https://javascript.info/profile/admin');
    33

Một ví dụ với các tham số chứa dấu cách và dấu chấm câu

let url = new URL('https://javascript.info/profile/admin');
9

Có một RFC3986 tiêu chuẩn xác định ký tự nào được phép trong URL và ký tự nào không

Những ký tự không được phép, phải được mã hóa, chẳng hạn như các chữ cái không phải la tinh và dấu cách – được thay thế bằng mã UTF-8 của chúng, có tiền tố là

let url = new URL('https://javascript.info/profile/admin');
34, chẳng hạn như
let url = new URL('https://javascript.info/profile/admin');
35 (một khoảng trắng có thể được mã hóa bởi
let url = new URL('https://javascript.info/profile/admin');
36, vì lý do lịch sử, nhưng đó là

Tin tốt là các đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 tự động xử lý tất cả. Chúng tôi chỉ cung cấp tất cả các tham số chưa được mã hóa, sau đó chuyển đổi
let url = new URL('https://javascript.info/profile/admin');
3 thành chuỗi

new URL(url, [base])
5

Như bạn có thể thấy, cả

let url = new URL('https://javascript.info/profile/admin');
39 trong đường dẫn url và
let url = new URL('https://javascript.info/profile/admin');
90 trong tham số đều được mã hóa

URL trở nên dài hơn vì mỗi chữ cái cyrillic được biểu thị bằng hai byte trong UTF-8, vì vậy có hai thực thể

let url = new URL('https://javascript.info/profile/admin');
91

Ngày xưa, trước khi các đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 xuất hiện, người ta đã sử dụng các chuỗi cho URL

Hiện tại, các đối tượng

let url = new URL('https://javascript.info/profile/admin');
3 thường thuận tiện hơn, nhưng các chuỗi vẫn có thể được sử dụng. Trong nhiều trường hợp sử dụng một chuỗi làm cho mã ngắn hơn

Tuy nhiên, nếu chúng ta sử dụng một chuỗi, chúng ta cần mã hóa/giải mã các ký tự đặc biệt theo cách thủ công

Có các chức năng tích hợp cho điều đó

  • encodeURI – mã hóa toàn bộ URL
  • decodeURI – giải mã lại
  • encodeURIComponent – ​​mã hóa thành phần URL, chẳng hạn như tham số tìm kiếm hoặc hàm băm hoặc tên đường dẫn
  • decodeURIComponent – ​​giải mã lại

Một câu hỏi tự nhiên là. “Sự khác biệt giữa

let url = new URL('https://javascript.info/profile/admin');
94 và
let url = new URL('https://javascript.info/profile/admin');
95 là gì?

Điều đó dễ hiểu nếu chúng ta nhìn vào URL, được chia thành các thành phần trong hình trên

let url = new URL('https://javascript.info/profile/admin');
3

Như chúng ta có thể thấy, các ký tự như

javascript:alert("Hello World!")
14,
javascript:alert("Hello World!")
16,
let url = new URL('https://javascript.info/profile/admin');
98,
let url = new URL('https://javascript.info/profile/admin');
99,
javascript:alert("Hello World!")
18 được cho phép trong URL

…Mặt khác, nếu chúng ta xem xét một thành phần URL đơn lẻ, chẳng hạn như tham số tìm kiếm, thì các ký tự này phải được mã hóa để không phá vỡ định dạng

  • let url = new URL('https://javascript.info/profile/admin');
    95 chỉ mã hóa các ký tự hoàn toàn bị cấm trong URL
  • let url = new URL('https://javascript.info/profile/admin');
    94 mã hóa các ký tự giống nhau và, ngoài chúng, các ký tự
    javascript:alert("Hello World!")
    
    18,
    new URL(url, [base])
    54,
    let url = new URL('https://javascript.info/profile/admin');
    99,
    let url = new URL('https://javascript.info/profile/admin');
    36,
    new URL(url, [base])
    57,
    new URL(url, [base])
    58,
    javascript:alert("Hello World!")
    
    14,
    let url = new URL('https://javascript.info/profile/admin');
    30,
    let url = new URL('https://javascript.info/profile/admin');
    98,
    javascript:alert("Hello World!")
    
    16 và
    let url = new URL('https://javascript.info/profile/admin');
    33

Vì vậy, đối với toàn bộ URL, chúng tôi có thể sử dụng

let url = new URL('https://javascript.info/profile/admin');
95

let url = new URL('https://javascript.info/profile/admin');
3

…Trong khi đối với các tham số URL, chúng ta nên sử dụng

let url = new URL('https://javascript.info/profile/admin');
94 để thay thế

let url = new URL('https://javascript.info/profile/admin');
0

So sánh nó với

let url = new URL('https://javascript.info/profile/admin');
95

let url = new URL('https://javascript.info/profile/admin');
1

Như chúng ta có thể thấy,

let url = new URL('https://javascript.info/profile/admin');
95 không mã hóa
let url = new URL('https://javascript.info/profile/admin');
99, vì đây là một ký tự hợp lệ trong toàn bộ URL

Nhưng chúng ta nên mã hóa

let url = new URL('https://javascript.info/profile/admin');
99 bên trong một tham số tìm kiếm, nếu không, chúng ta sẽ nhận được
let url = new URL('https://javascript.info/profile/admin');
30 – đó thực sự là
let url = new URL('https://javascript.info/profile/admin');
31 cộng với một số tham số khó hiểu
let url = new URL('https://javascript.info/profile/admin');
32. Không như dự định

Vì vậy, chúng ta chỉ nên sử dụng

let url = new URL('https://javascript.info/profile/admin');
94 cho mỗi tham số tìm kiếm để chèn chính xác tham số đó vào chuỗi URL. An toàn nhất là mã hóa cả tên và giá trị, trừ khi chúng tôi hoàn toàn chắc chắn rằng nó chỉ có các ký tự được phép

Sự khác biệt về mã hóa so với

let url = new URL('https://javascript.info/profile/admin');
3

Các lớp và dựa trên đặc tả URI mới nhất. RFC3986, trong khi các chức năng của

let url = new URL('https://javascript.info/profile/admin');
35 dựa trên phiên bản lỗi thời RFC2396

Có một vài sự khác biệt, e. g. Địa chỉ IPv6 được mã hóa khác nhau

let url = new URL('https://javascript.info/profile/admin');
2

Như chúng ta có thể thấy, ________ 495 thay thế dấu ngoặc vuông ________ 837, điều đó không chính xác, lý do là. Các url IPv6 không tồn tại tại thời điểm RFC2396 (tháng 8 năm 1998)

Làm cách nào để thêm JavaScript vào URL?

1 câu trả lời .
URL nằm trong tiêu điểm
Nhấn phím mũi tên trái cho đến khi con trỏ của bạn đứng trước toàn bộ url (bao gồm cả HTTP và www)
gõ "javascript. "
Nhấn nút Enter
Tiêu điểm phải quay lại trang web

Làm cách nào để chạy JavaScript trong một liên kết?

Trong JavaScript, bạn có thể gọi hàm hoặc đoạn mã JavaScript thông qua thẻ HREF của liên kết . Điều này có thể hữu ích vì điều đó có nghĩa là mã JavaScript đã cho sẽ tự động chạy khi ai đó nhấp vào liên kết. HREF đề cập đến thuộc tính “HREF” trong thẻ A LINK (siêu liên kết trong HTML).

URL có thể chứa JavaScript không?

Có, URL có thể chứa mã thực thi (thuộc bất kỳ loại nào, kể cả javascript) vì URL là dữ liệu chuỗi đơn giản.

Làm cách nào để lấy URL trong JavaScript?

Có thể lấy URL hiện tại bằng cách sử dụng thuộc tính 'URL' của đối tượng Tài liệu chứa thông tin về URL hiện tại . Thuộc tính 'URL' trả về một chuỗi có vị trí đầy đủ của trang hiện tại, cùng với chứa chuỗi có giao thức HTTP, chẳng hạn như ( http. //).