Tôi có một mã tải tập lệnh JS từ URL và đặt nó vào trang web của tôi. Tôi không muốn tải tập lệnh từ URL vì nó phụ thuộc vào URL và khi tập lệnh trong URL này không hoạt động, tập lệnh trong trang web của tôi cũng sẽ không hoạt động. Điều tôi muốn làm là tải xuống mã tập lệnh và lưu anh ta trong FTP dưới dạng tệp JS, sau đó tải tập lệnh từ tệp này chứ không phải từ URL. Làm cách nào để tải xuống mã tập lệnh? Đây là mã mà tôi có ngay bây giờ:
SO.load[{"lang":"en","dir":"LTR","cookieOptions":{"domain":".trbinaryoptions.com"},"packages":{"Clock":{},"Balance":{},"RegularPlatform":{"settings":{"selector":"#so-trading"}}}}];
Ảnh của Pankaj Patel trên unplash
Tải xuống các tập tin là một khía cạnh thiết yếu của việc lướt Internet. Hàng tấn tệp được tải xuống từ Internet mỗi ngày, từ các tệp nhị phân [như ứng dụng, hình ảnh, video và âm thanh] đến các tệp văn bản đơn giản.
Nếu bạn có một nhà phát triển web và bạn muốn thêm tính năng này vào ứng dụng của mình, đây là cách bạn có thể làm điều đó.
Chúng tôi sẽ kiểm tra 3 cách tiếp cận khác nhau:
- Chế độ cơ bản chỉ sử dụng các phần tử HTML;
- sử dụng JavaScript với các phần tử API Fetch và HTML;
- Sử dụng các phần tử XMLHTTPREQUEST và HTML, nhưng trong một kịch bản phức tạp hơn, trong đó chúng tôi thực hiện một hệ thống để đo lường tiến trình;
Phương pháp i
Phương thức đầu tiên và đơn giản nhất ngụ ý tạo một phần tử HTML neo có thuộc tính download.
Theo định nghĩa, thuộc tính download chỉ định rằng mục tiêu [tệp được chỉ định trong thuộc tính href] sẽ được tải xuống khi người dùng nhấp vào siêu liên kết.
Ngoài ra với thuộc tính download này, chúng tôi có thể chỉ định tên mới của tệp sau khi được tải xuống. Do đó, nếu chúng tôi muốn tải xuống tệp với một tên cụ thể, chúng tôi có thể kiểm soát điều này bằng thuộc tính này. Tuy nhiên, người dùng vẫn có thể thay đổi tên khi cửa sổ tải xuống gốc xuất hiện, nhưng tên chúng tôi cung cấp sẽ là mặc định.
Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng.
Phần đầu và khối onreadystatechange tương tự như hàm thứ hai. Tải xuống phản hồi dưới dạng đối tượng Blob, tạo một DomString và sử dụng phần tử neo để tải xuống tệp.
Bên trong ____10 Chúng tôi sử dụng các giá trị download1 và download2 để tính tiến độ theo tỷ lệ phần trăm và thời gian trôi qua, cũng như tốc độ tải xuống và thời gian còn lại.
Hàm ở trên đang làm như vậy, chỉ là chúng tôi tạo phần tử HTML neo một cách nhanh chóng, chỉ cho hành động tải xuống này và sau đó chúng tôi xóa nó.
IMG_URLlà URL của hình ảnh chúng tôi muốn tải xuống;FILE_NAMElà tên mới của tệp sau khi nó được tải xuống;
Hạn chế của phương pháp này là nó phải tôn trọng chính sách đồng nghĩa, do đó thuộc tính này hoạt động chính xác cho các URL có nguồn gốc tương tự.
Một kịch bản phổ biến là khi bạn muốn tải xuống một hình ảnh từ một máy chủ khác và thay vì tải xuống, trình duyệt sẽ mở nó trong một tab mới.
Khía cạnh chính của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu và có thể được xem tự nhiên trong trình duyệt.
Lưu ý trong hình ảnh trên cách quá trình tải xuống được gửi đến trình duyệt để quản lý nó và trình duyệt cung cấp kiểm soát nó và hiển thị tiến trình.
Phương pháp II
Phương pháp thứ hai và phương pháp thứ ba sử dụng cùng một kỹ thuật với phần tử neo, nhưng thay vì cung cấp URL hình ảnh, chúng tôi chuyển đổi nội dung tệp thành một blob và sau đó chúng tôi tạo DomString từ nó bằng phương pháp createdObjectURL.
Lưu ý rằng cuối cùng chúng tôi đã sử dụng URL.revokeObjectURL, điều này rất quan trọng về mặt quản lý bộ nhớ. Khi sử dụng URL.createObjectURL, một URL đối tượng mới được tạo, ngay cả khi nó được gọi với cùng một đối tượng Blob.
Bất cứ khi nào một URL đối tượng được tạo, nó sẽ tồn tại trong suốt vòng đời của tài liệu mà nó được tạo. Trình duyệt sẽ phát hành tất cả các URL đối tượng khi tài liệu đang được tải. Tuy nhiên, điều quan trọng là bạn phát hành URL đối tượng bất cứ khi nào chúng không còn cần thiết để cải thiện hiệu suất và giảm thiểu việc sử dụng bộ nhớ.
Khía cạnh chính của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu, nhưng trong ứng dụng của chúng tôi và sẽ chỉ được chuyển cho trình duyệt khi tải xuống hoàn tất.
Lưu ý trong GIF ở trên rằng một khi chúng tôi nhấp vào nút tải xuống, dường như không có gì xảy ra, bởi vì việc tải xuống diễn ra như một tác vụ không đồng bộ trong ứng dụng của chúng tôi và một khi nó được hoàn thành, nó sẽ được chuyển cho trình duyệt.
Khi cửa sổ Trình duyệt đó xuất hiện và chúng tôi nhấp vào Lưu, tệp sẽ được lưu tự động trên máy tính của chúng tôi.
Với phương thức này bây giờ, chúng tôi có thể tải xuống bất kỳ loại tệp nào bất kể máy chủ gốc. Tuy nhiên, vấn đề là vì việc tải xuống diễn ra bên trong ứng dụng của chúng tôi, người dùng có thể nghĩ rằng không có gì xảy ra khi anh ta nhấp và do đó chúng ta phải quản lý các bản tải xuống tệp lớn bằng cách thực hiện phép đo tiến trình.
Đồng thời, phương pháp này rất hữu ích khi chúng ta cần thực hiện một số hành động nhất định trong ứng dụng của mình sau khi tệp đã hoàn thành tải xuống. Hiển thị một tin nhắn, gửi yêu cầu đến phần cuối hiển thị một trang mới, v.v.
Phương pháp III
Phương pháp thứ ba tương tự như phương pháp thứ hai, chúng ta vẫn sẽ sử dụng Blob và CreatObjectURL, nhưng thay vì sử dụng API tìm nạp, chúng ta sẽ sử dụng XMLHTTPREQUEST.
Chúng tôi đang sử dụng XMLHTTPREQUEST trên Fetch vì hiện tại nói API Fetch không cung cấp giao diện để đo lường tiến độ, trong khi XMLHTTPRequest.
Lưu ý rằng cuối cùng chúng tôi đã sử dụng URL.revokeObjectURL, điều này rất quan trọng về mặt quản lý bộ nhớ. Khi sử dụng URL.createObjectURL, một URL đối tượng mới được tạo, ngay cả khi nó được gọi với cùng một đối tượng Blob.
Bất cứ khi nào một URL đối tượng được tạo, nó sẽ tồn tại trong suốt vòng đời của tài liệu mà nó được tạo. Trình duyệt sẽ phát hành tất cả các URL đối tượng khi tài liệu đang được tải. Tuy nhiên, điều quan trọng là bạn phát hành URL đối tượng bất cứ khi nào chúng không còn cần thiết để cải thiện hiệu suất và giảm thiểu việc sử dụng bộ nhớ.
Khía cạnh chính của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu, nhưng trong ứng dụng của chúng tôi và sẽ chỉ được chuyển cho trình duyệt khi tải xuống hoàn tất.
Lưu ý trong GIF ở trên rằng một khi chúng tôi nhấp vào nút tải xuống, dường như không có gì xảy ra, bởi vì việc tải xuống diễn ra như một tác vụ không đồng bộ trong ứng dụng của chúng tôi và một khi nó được hoàn thành, nó sẽ được chuyển cho trình duyệt.
Khi cửa sổ Trình duyệt đó xuất hiện và chúng tôi nhấp vào Lưu, tệp sẽ được lưu tự động trên máy tính của chúng tôi.
Với phương thức này bây giờ, chúng tôi có thể tải xuống bất kỳ loại tệp nào bất kể máy chủ gốc. Tuy nhiên, vấn đề là vì việc tải xuống diễn ra bên trong ứng dụng của chúng tôi, người dùng có thể nghĩ rằng không có gì xảy ra khi anh ta nhấp và do đó chúng ta phải quản lý các bản tải xuống tệp lớn bằng cách thực hiện phép đo tiến trình.
Đồng thời, phương pháp này rất hữu ích khi chúng ta cần thực hiện một số hành động nhất định trong ứng dụng của mình sau khi tệp đã hoàn thành tải xuống. Hiển thị một tin nhắn, gửi yêu cầu đến phần cuối hiển thị một trang mới, v.v.
Trong phương pháp cuối cùng, chúng tôi thực hiện phép đo tiến trình của riêng mình, tương tự như trong trình duyệt.