Cách lấy phần tử script hiện tại:
1. Sử dụng document.currentScript
document.currentScriptsẽ trả về <script>phần tử có tập lệnh hiện đang được xử lý.
<script>
var me = document.currentScript;
</script>
Những lợi ích
- Đơn giản và rõ ràng. Đáng tin cậy.
- Không cần sửa đổi thẻ script
- Hoạt động với các tập lệnh không đồng bộ (
defer& async)
- Hoạt động với các tập lệnh được chèn động
Các vấn đề
- Sẽ không hoạt động trong các trình duyệt cũ hơn và IE.
- Không hoạt động với các mô-đun
<script type="module">
2. Chọn tập lệnh theo id
Cung cấp cho tập lệnh một thuộc tính id sẽ cho phép bạn dễ dàng chọn nó theo id từ bên trong bằng cách sử dụng document.getElementById().
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Những lợi ích
- Đơn giản và rõ ràng. Đáng tin cậy.
- Hầu như được hỗ trợ toàn cầu
- Hoạt động với các tập lệnh không đồng bộ (
defer& async)
- Hoạt động với các tập lệnh được chèn động
Các vấn đề
- Yêu cầu thêm thuộc tính tùy chỉnh vào thẻ script
id thuộc tính có thể gây ra hành vi kỳ lạ cho các tập lệnh trong một số trình duyệt cho một số trường hợp cạnh
3. Chọn tập lệnh bằng data-*thuộc tính
Cung cấp cho tập lệnh một data-*thuộc tính sẽ cho phép bạn dễ dàng chọn nó từ bên trong.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Điều này có một vài lợi ích so với tùy chọn trước đó.
Những lợi ích
- Đơn giản và rõ ràng.
- Hoạt động với các tập lệnh không đồng bộ (
defer& async)
- Hoạt động với các tập lệnh được chèn động
Các vấn đề
- Yêu cầu thêm thuộc tính tùy chỉnh vào thẻ script
- HTML5 và
querySelector()không tuân thủ trong tất cả các trình duyệt
- Ít được hỗ trợ hơn so với sử dụng
idthuộc tính
- Sẽ nhận được xung quanh
<script>với idcác trường hợp cạnh.
- Có thể bị lẫn lộn nếu một yếu tố khác có cùng thuộc tính và giá trị dữ liệu trên trang.
4. Chọn tập lệnh theo src
Thay vì sử dụng các thuộc tính dữ liệu, bạn có thể sử dụng bộ chọn để chọn tập lệnh theo nguồn:
<script src="//example.com/embed.js"></script>
Trong embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Những lợi ích
- Đáng tin cậy
- Hoạt động với các tập lệnh không đồng bộ (
defer& async)
- Hoạt động với các tập lệnh được chèn động
- Không cần thuộc tính hoặc id tùy chỉnh
Các vấn đề
- Liệu không làm việc cho các kịch bản trong nước
- Sẽ gây ra vấn đề trong các môi trường khác nhau, như Phát triển và Sản xuất
- Tĩnh và dễ vỡ. Thay đổi vị trí của tệp tập lệnh sẽ yêu cầu sửa đổi tập lệnh
- Ít được hỗ trợ hơn so với sử dụng
idthuộc tính
- Sẽ gây ra sự cố nếu bạn tải cùng một tập lệnh hai lần
5. Lặp lại tất cả các tập lệnh để tìm tập lệnh bạn muốn
Chúng tôi cũng có thể lặp qua từng phần tử tập lệnh và kiểm tra từng phần riêng lẻ để chọn phần tử chúng tôi muốn:
<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
if( isMe(scripts[i])){
me = scripts[i];
}
}
</script>
Điều này cho phép chúng tôi sử dụng cả hai kỹ thuật trước đó trong các trình duyệt cũ không hỗ trợ querySelector()tốt với các thuộc tính. Ví dụ:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Điều này thừa hưởng những lợi ích và vấn đề của bất kỳ cách tiếp cận nào được thực hiện, nhưng không dựa vào querySelector()vì vậy sẽ hoạt động trong các trình duyệt cũ hơn.
6. Nhận kịch bản thực hiện cuối cùng
Vì các tập lệnh được thực thi tuần tự, nên phần tử tập lệnh cuối cùng sẽ rất thường là tập lệnh hiện đang chạy:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Những lợi ích
- Đơn giản.
- Hầu như được hỗ trợ toàn cầu
- Không cần thuộc tính hoặc id tùy chỉnh
Các vấn đề
- Liệu không làm việc với kịch bản không đồng bộ (
defer& async)
- Liệu không làm việc với các kịch bản tự động chèn