Lấy thuộc tính dữ liệu của thẻ tập lệnh?

Question

Nói rằng tôi đã có thẻ script sau:

<script async data-id="p3PkBtuA" src="//example.com/embed.js"></script> 

Trong đó embed.js tập tin, làm thế nào tôi có thể nhận được giá trị của data-id thuộc tính?

Tôi đang cố gắng giữ cho tệp embed.js càng sáng càng tốt, vì vậy, lý tưởng là không cần sử dụng một số loại thư viện javascript nào.

Answer 1

Trong tệp embed.js đó, làm cách nào tôi có thể nhận được giá trị của thuộc tính id dữ liệu?

Bạn sẽ phải phân tích cú pháp DOM và tìm kiếm thẻ <script> tương ứng và sau đó tìm nạp thuộc tính từ đó. Hãy xem document.getElementsByTagName cho phép bạn truy xuất tất cả các phần tử <script> trên trang hiện tại. Sau đó lặp qua mảng kết quả được trả về bởi phương pháp này, phù hợp với các yếu tố kịch bản chính xác bằng cách sử dụng thuộc tính src và sau đó đọc các thuộc tính khác mà bạn đang quan tâm.

var scripts = document.getElementsByTagName('script'); 
for (var i = 0; i < scripts.length; i++) { 
    var script = scripts[i]; 
    // you might consider using a regex here 
    if (script.getAttribute('src') == '//example.com/embed.js') { 
     // we've got a match 
     var dataId = script.getAttribute('data-id'); 
    } 
} 

Answer 2

Đó embed.js đang được trả lại trong DOM, do đó bạn có toàn quyền truy cập vào nó. Eithergive nó một id và sử dụng document.getElementById của querySelctorAll hoặc getElementsByTagName

Trong bạn embed.js bạn có thể có một cái gì đó như:

var scripts = document.getElementsByTagName('script'); 
    for(var i = 0, l = scripts.length; i < l; i++){ 
    if(scripts[i].src === '//example.com/embed.js'){ 
     alert(scripts[i].getAttribute('data-id')); 
     break; 
    } 
    } 

Bạn nhận được các ý tưởng

Answer 3

for (var i = 0; i < scripts.length; i++) { 
    var script = scripts[i]; 
    if (script.getAttribute('src') == '//example.com/embed.js') { 
     alert(script.dataset.id); 
    } 
} 

Answer 4

Đối với các trình duyệt hiện đại có hỗ trợ html5 bạn có thể sử dụng document.currentScript để lấy phần tử tập lệnh hiện tại.

Nếu không, sử dụng querySelector() để chọn yếu tố kịch bản của bạn bằng cách id hoặc thuộc tính.

Lưu ý rằng chúng tôi không sử dụng thuộc tính src vì có thể mong manh nếu bạn phân phối qua CDN hoặc có sự khác biệt giữa môi trường phát triển và sản xuất.

embed.js

(function(){ 
    // We look for: 
    // A `script` element 
    // With a `data-id` attribute 
    // And a `data-name` attribute equal to "MyUniqueName" 
    var me = document.querySelector('script[data-id][data-name="MyUniqueName"]'); 
    var id = me.getAttribute('data-id'); 
})(); 

Trong html host:

<script async 
    data-id="p3PkBtuA" 
    data-name="MyUniqueName" 
    src="//example.com/embed.js"> 
</script> 

approcah này có nhược điểm mà bạn không thể nhúng thành công hai kịch bản giống hệt nhau. Đây là một trường hợp khá hiếm, nhưng có thể xảy ra.

Lưu ý rằng tôi sẽ đích thân chúng tôi data-id để chọn kịch bản thay vì thông qua dữ liệu, và sẽ đặt các dữ liệu duy nhất trong một thẻ mô tả nhiều hơn:

<script async 
    data-id="MyUniqueName" 
    data-token="p3PkBtuA" 
    src="//example.com/embed.js"> 
</script> 

mà sẽ cho phép tôi sử dụng này như sau:

var token = document 
    .querySelector('script[data-id="MyUniqueName"][data-token]') 
    .getAttribute('data-token'); 

Answer 5

var attributeValue = Array.prototype.slice.apply(document.scripts).filter(
    function(script){ 
     return script.src.indexOf('script.source.com/big/') > -1; 
    })[0].attributes["atrributeName"].value; 

nơi script tag là <sript src="www.script.source.com/big/dud/baa.js" atrributeName="some value"><script>