Javascript Girl
  1. Javascript Girl
  3. Comment vérifier si un document SVG intégré est chargé dans une page html?
Intereting Posts
Nodejs génère un petit alphanumérique unique Comment vérifier si une classe de Javascript hérite d'une autre (sans créer un obj)? Comment puis-je filtrer les colonnes de table à l'aide de la logique OR comme apposé sur AND Détection de Word sous le curseur Duck Typing in Javascript Comment faire pour que les bloqueurs pop-up permettent vos fenêtres contextuelles? Index de retour de la plus grande valeur dans un tableau XmlHttpRequest CORS POST envoyé sans cookies Choppy / Laggy scroll sur Chrome et IE Mastering Javascript Function.bind () Multiplie tous les éléments en tableau Besoin d'aide pour essayer Performance de jQuery.grep vs. Array.filter Trier une liste avec D3 montrant uniquement des valeurs uniques Comment remplacer les marqueurs A et B dans Google Map Api

Comment vérifier si un document SVG intégré est chargé dans une page html?

J'ai besoin de modifier (en utilisant javascript) un document SVG intégré dans une page html.

Lorsque le SVG est chargé, je peux accéder au dom du SVG et de ses éléments. Mais je ne peux pas savoir si le SVG dom est prêt ou pas, donc je ne peux pas exécuter des actions par défaut sur le SVG lorsque la page html est chargée.

Pour accéder au SVG dom, j'utilise ce code: 

var svg = document.getElementById("chart").getSVGDocument();

Où "graphique" est l'identifiant de l'élément d'intégration.

Si j'essaie d'accéder au SVG lorsque le document html est prêt, de cette façon: 

 jQuery(document).ready( function() { var svg = document.getElementById("chart").getSVGDocument(); ...

Svg est toujours nul. Je dois juste savoir quand ce n'est pas nul, alors je peux commencer à le manipuler. Savez-vous s'il existe un moyen de le faire?

Vous pouvez essayer de faire des sondages de temps en temps. 

 function checkReady() { var svg = document.getElementById("chart").getSVGDocument(); if (svg == null) { setTimeout("checkReady()", 300); } else { ... } }

Sur votre élément d'intégration (p. Ex. «Intégrer», «objet», «iframe») dans le document principal, ajoutez un attribut onload qui appelle votre fonction ou ajoutez l'écouteur d'événement dans le script, par exemple embeddingElm.addEventListener('load', callbackFunction, false) . Une autre option pourrait être d'écouter DOMContentLoaded , dépend de ce que vous voulez.

Vous pouvez également ajouter un auditeur de charge sur le document principal. jQuery(document).ready ne signifie pas que toutes les ressources sont chargées, juste que le document lui-même possède un DOM prêt à l'action. Cependant, notez que si vous écoutez la charge sur le document entier, votre fonction de rappel ne sera appelée que lorsque toutes les ressources de ce document seront chargées, css, javascript etc.

Si vous utilisez inline svg, alors jQuery(document).ready fonctionnera très bien.

Sur une autre note, vous pouvez envisager d'utiliser embeddingElm.contentDocument (si disponible) au lieu d' embeddingElm.getSVGDocument() .

Vous pouvez utiliser un événement de recharge pour le contrôle.

Supposons que some.svg soit incorporé dans la balise d'objet: 

 <body> <object id="svgholder" data="some.svg" type="image/svg+xml""></object> </body>

Jquery 

 var svgholder = $('body').find("object#svgholder"); svgholder.load("image/svg+xml", function() { alert("some svg loaded"); });

Javascript 

 var svgholder = document.getElementById("svgholder"); svgholder.onload = function() { alert("some svg loaded"); }

En supposant que votre SVG est dans une <embed> : 

 <embed id="embedded-image" src="image.svg" type="image/svg+xml" />

L'image SVG se trouve essentiellement dans un sous-document qui aura un événement de load distinct à celui du document principal. Cependant, vous pouvez écouter cet événement et le gérer: 

 var embed = document.getElementById("embedded-image"); embed.addEventListener('load', function() { var svg = embed.getSVGDocument(); // Operate upon the SVG DOM here });

Cela vaut mieux que le sondage, car toute modification que vous effectuez au SVG se produira avant qu'il ne soit peint en premier, réduisant le scintillement et l'effort CPU passé à peindre.

L'événement de chargement de l'élément d'intégration (par exemple l'objet) serait ma préférence mais, si ce n'est pas une solution viable pour une raison quelconque, le seul test générique et fiable que j'ai trouvé pour SVG DOM ready est la méthode getCurrentTime du SVG Élément racine: 

 var element = document.getElementById( 'elementId' ); var svgDoc = element.contentDocument; var svgRoot = svgDoc ? svgDoc.rootElement : null; if ( svgRoot && svgRoot.getCurrentTime && ( svgRoot.getCurrentTime() > 0 )) { /* SVG DOM ready */ }

La recommandation W3C SVG stipule que getCurrentTime sur SVGSVGElement:

Renvoie l'heure actuelle en secondes par rapport à l'heure de début du fragment de document SVG actuel. Si getCurrentTime est appelé avant que la chronologie du document ne commence (par exemple, par un script exécuté dans un élément 'script' avant que l'événement SVGLoad du document soit envoyé), alors 0 est renvoyé.

En utilisant jQuery, vous pouvez lier à l'événement de chargement de fenêtre Erik mentionne avec: 

 $(window).load(function(){ var svg = document.getElementById("chart").getSVGDocument(); });

Vous pouvez affecter un gestionnaire d'événements onload à un élément dans votre document SVG et lui demander d'appeler une fonction javascript dans la page html. Onload maps to SVGLoad.

http://www.w3.org/TR/SVG11/interact.html#LoadEvent

L'événement est déclenché au point où l'agent utilisateur a totalement analysé l'élément et ses descendants et est prêt à agir de manière appropriée sur cet élément