Javascript Girl
  1. Javascript Girl
  3. Getter / setter pour src attribute dans js?
Intereting Posts
Comment accéder au système de fichiers en réagissant en mode natif? Quelqu'un peut-il aider à décrire les deux types de stockage de tableaux en version javascript? Node.js Busboy analyse les champs et les fichiers séparément JavaScript: déterminez le type d'image Obtenir des coordonnées d'adresse de Google Maps API par ajax () demande Three.js – Largeur de vue Javascript – signifie? Injection angulaire 1.5 et ES6 – Dépendance JQuery surveille les changements de DomElement? Comment pouvez-vous indiquer quelle connexion socket a cliqué sur un bouton en utilisant socket.io? Le paramètre ASP ne passe pas à JavaScript Existe-t-il un moyen de «chercher» à un certain moment dans une vidéo utilisant JavaScript? Facile manipulation dom dans AngularJS – cliquez sur un bouton, puis mettez le focus sur un élément d'entrée Django: Comment accéder à l'identifiant de l'utilisateur actuellement connecté dans javascript? Traduction en JavaScript comme gettext en PHP?

Getter / setter pour src attribute dans js?

Y at-il une façon de définir les getters et les setters de src attribut de tous les HTMLSourceElements? Je pense à l'utiliser comme mesure de sécurité supplémentaire pour mon application Web qui utilise JS à partir d'autres sites Web. Par "setters of src attribute of all HTMLSourceElements", je veux dire que le setter devrait être appelé comme code: SomeVideoElement.src = "/static/somevideo.mp4"

Jusqu'à présent, j'ai essayé: 

HTMLElement.prototype.__defineGetter__("src", function () { console.log("getter called!"); debugger; }); HTMLElement.prototype.__defineSetter__("src", function (val) { debugger; }); //tested at chrome, didn't yield any logs (getters and setters not called)

et 

 HTMLSourceElement.prototype._setAttribute = HTMLSourceElement.prototype.setAttribute; HTMLSourceElement.prototype._getAttribute = HTMLSourceElement.prototype.getAttribute; HTMLSourceElement.prototype.setAttribute = function(){ console.log("HTMLSourceElement.setAttribute called!"); debugger; HTMLSourceElement.prototype._setAttribute.apply(this, arguments); } //tested at chrome. Called only for codes like: SomeVidElem.setAttribute("src",someurl)

Y a-t-il un moyen de le faire? Ou est-ce simplement impossible? Merci : )

__defineGetter__ et __defineSetter__ sont obsolètes et peuvent être obsolètes. Object.defineProperty(parentObject, 'propName', {}) est la nouvelle façon.

Je ne pouvais pas le faire fonctionner, mais peut-être que quelqu'un d'autre peut? 

 Object.defineProperty(HTMLSourceElement.prototype, 'src', { enumerable: true, configurable: true, get: function(){ return this.getAttribute('src') }, set: function(newval){ console.log('being set'); this.setAttribute('src',newval); } });

EDIT: après un peu d'expérimentation, cela devrait fonctionner si vous delete la propriété src de chaque élément dont vous avez besoin. Un peu piquante, mais le meilleur que je pourrais faire.

EDIT2: Avec cela, un utilisateur peut encore écraser théoriquement vos fonctions get / set. Pour l'arrêter, essayez d'enlever le configurable: true (il sera par défaut false). Je ne suis pas sûr, mais de l'expérience passée, il semble qu'ils ne peuvent même pas le redéfinir sur une instance.

Vous devez jouer avec MutationObserver . Par exemple, ceci permet de surveiller les modifications apportées aux propriétés de l'image: 

 var target = document.querySelector('#image'); var observer = new MutationObserver(function (mutations) { mutations.forEach(function(mutation) { console.log(mutation); alert('Change: ' + mutation.attributeName + ', ' + mutation.oldValue); }); }); observer.observe(target, { attributes: true, attributeOldValue: true });

Support: tous les navigateurs modernes et IE11 +.

Demo: http://jsfiddle.net/dfsq/PmTHj/1/ 

 var srcElements = document.querySelectorAll('[src]'); for(var i = 0; i < srcElements.length; i++){ if( typeof(srcElements[i].src) != 'undefined' ){ console.log(srcElements[i] + ' has a src property'); } }