Mở Ảnh Trong Tab Mới

Trong bài học này chúng ta sẽ tìm hiểu cách sử dụng JavaScript để khi người dùng click chuột lên ảnh trên trang thì trình duyêt sẽ mở ảnh này ở một tab mới.

Lấy Ra Các Phần Tử img Trên Trang

Để bắt đầu bạn xoá dòng câu lệnh alert("Xin chào!") trong tập tin script.js và thêm vào 2 câu lệnh dưới đây:

var images = document.getElementsByTagName('img');

console.log(images);

Đoạn code trên sử dụng phương thức (hay method) getElementsByTagName() của phần tử DOM document để lấy về tất cả các phần tử HTML được tạo ra bởi thẻ <img> và sau đó sử dụng console.log() để hiển thị thông tin chi tiết về giá trị trả về này trong công cụ Developer Tools của trình duyệt. Nếu bạn bật công cụ Developer Tools lên (sử dụng phím tắt F12 hoặc Fn + F12) và click chọn tab Console bạn sẽ thấy kết quả hiển thị một HTML collection như sau (click vào dấu mũi tên ngoài cùng bên trái để mở rộng thông tin của HTML collection cũng như các phần tử và thuộc tính của phần tử bên trong):

Trình duyệt hiển thị một HTML collection trong Console tab

Môt collection trong JavaScript là một kiểu dữ liệu bao gồm một tập hợp các giá trị khác nhau. Collection khá giống với kiểu dữ liệu mảng tuy nhiên hạn chế hơn mảng về chức năng (ví dụ như collection không cung cấp phương thức push() hay splice() như mảng...). Tuy nhiên dữ liệu kiểu collection cho phép chúng ta thực hiện việc lặp qua các phần tử sử dụng vòng lặp for giống như mảng.

Lặp Qua Collection

Quay trở lại tập tin script.js, chúng ta sẽ vô hiệu dòng lệnh console.log() đi (biến nó thành một dòng comment) và đồng thời thêm vào đoạn code sau:

// console.log(images);

for (var i = 0; i < images.length; i++) {
    var currentImage = images[i];

    console.log(currentImage);
}

Khi tải lại trang home.html trên trình duyệt và bật công cụ Developer Tools bạn sẽ thấy đoạn code trên hiển thị thông tin trong tab Console như sau:

Thông tin hiển thị của phần tử image trên tab Console của Developer Tools

Mặc dù bạn thấy tab Console hiển thị mã HTML cho thẻ <img> như hình trên nhưng trên thực tế thì giá trị của currentImage là một phần tử DOM HTML. Và dó đó nếu như bạn cập nhật dòng code console.log ở trên giống với đoạn code sau:

// console.log(images);

for (var i = 0; i < images.length; i++) {
    var currentImage = images[i];

    console.log(currentImage.getAttribute('src'));
}

Bạn sẽ thấy kết quả hiển thị là giá trị của thuộc tính src của phần tử img.

Thông tin hiển thị của giá trị thuộc tính src của phần tử image trên tab Console

Hàm Xử Lý Sự Kiện Click Chuột

Bây giờ bạn comment 2 dòng lệnh để log ra phần tử img và thuộc tính src của phần tử này đồng thời thêm vào đoạn code sau đây:

...
for (var i = 0; i < images.length; i++) {
    ...
    // console.log(currentImage.getAttribute('src'));

    currentImage.addEventListener("click", function() {
        window.open(currentImage.getAttribute('src'));
    });
}

Đoạn code trên sử dụng method addEventListener để đăng ký một hàm lắng nghe sự kiện người dùng click vào phần tử img (phần tử này lưu trong biến currentImage). Hàm này không có tên và sẽ được tự động gọi (call) nếu như sự kiện click chuột lên phần tử diễn ra.

Bây giờ nếu tải lại trang và nhấp chuột vào hình ảnh trên trang chủ bạn sẽ thấy trình duyệt mở một tab mới với màn hình chỉ hiển thị nội dung duy nhất của hình ảnh này:

Hiển thị hình ảnh trong tab mới của trình duyệt

Trước khi kết thúc bài học này tôi muốn bạn kiểm tra lại tính năng trên với trang about.html.

1 Bình Luận

van Bui van Bui

strong text

Nội dung không được để trống

Hướng Dẫn Liên Quan