operator - javascript esempio



Ottieni l'attributo dei dati del tag script? (4)

All'interno di tale file embed.js, come posso ottenere il valore dell'attributo data-id?

Dovrai analizzare il DOM e cercare il corrispondente tag <script> e quindi recuperare gli attributi da esso. Dai un'occhiata a document.getElementsByTagName che ti permetterebbe di recuperare tutti gli elementi <script> nella pagina corrente. Quindi esegui il ciclo attraverso l'array di risultati restituito da questo metodo, abbina l'elemento script corretto utilizzando l'attributo src e quindi leggi gli altri attributi a cui sei interessato.

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');
    }
}

https://ffff65535.com

Dì che ho il seguente tag script:

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

All'interno di tale file embed.js , come posso ottenere il valore dell'attributo data-id ?

Sto cercando di mantenere il file embed.js il più leggero possibile, quindi idealmente non avrebbe bisogno di usare una sorta di libreria javascript.


Per i browser moderni che supportano html5 è possibile utilizzare document.currentScript per ottenere l'elemento di script corrente.

Altrimenti, usa querySelector() per selezionare il tuo elemento di script tramite id o attributo .

Nota che non usiamo l'attributo src perché può essere fragile se stai distribuendo su un CDN o con differenze tra gli ambienti di sviluppo e di produzione.

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');
})();

Nell'host html:

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

Questo approccio ha lo svantaggio di non riuscire a incorporare due script identici. Questo è un caso piuttosto raro, ma potrebbe accadere.

Nota che personalmente userò data-id per selezionare lo script invece di passare i dati e inserirei i dati univoci in un tag più descrittivo:

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

che mi permetterebbe di usare questo:

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

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

dove tag script è <sript src="www.script.source.com/big/dud/baa.js" atrributeName="some value"><script>


var scripts = document.getElementsByTagName('script'); // load into a variable all the scripts of the page
for (var i = 0; i < scripts.length; i++) { // parse all scripts
        var script = scripts[i];
        if (script.getAttribute('src') == '//example.com/embed.js') {
            alert(script.dataset.id); // Show only specified script
        }
    }




javascript