Comment vérifier si un document SVG intégré est chargé dans une page html?
je dois éditer (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 suis pas en mesure de savoir si le dom SVG est prêt ou non, donc je ne peux pas effectuer 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'id de l'élément embed.
si j'essaie d'accéder au SVG quand le html le document est prêt, de cette façon:
jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...
svg est toujours null. J'ai juste besoin de savoir quand ce n'est pas nul, pour pouvoir commencer à le manipuler. Savez-vous si il existe un moyen de le faire?
7 réponses
vous pourriez essayer de sonder de temps en temps.
function checkReady() {
var svg = document.getElementById("chart").getSVGDocument();
if (svg == null) {
setTimeout("checkReady()", 300);
} else {
...
}
}
sur votre élément embedding(E. g 'embed',' object',' iframe') dans le document principal Ajouter un onload attribut qui appelle votre fonction, ou ajouter l'écouteur d'événements dans script, E. g embeddingElm.addEventListener('load', callbackFunction, false). Une autre option pourrait être d'écouter DOMContentLoaded, dépend de ce que vous souhaitez pour.
vous pouvez également ajouter un écouteur load sur le document principal. jQuery(document).ready ne signifie pas que toutes les ressources sont chargées, juste que le document lui-même a un DOM qui est prêt pour l'action. Cependant, notez que si vous écoutez pour charger le document entier, Votre fonction de rappel ne sera pas appelée tant que toutes les ressources de ce document ne seront pas chargées, css, javascript, etc.
Si vous utilisez inline svg, puis jQuery(document).ready fonctionne très bien cependant.
Sur une autre note, vous pouvez envisager d'utiliser embeddingElm.contentDocument (si disponible) au lieu de embeddingElm.getSVGDocument().
vous pourriez utiliser un onload événement pour le vérifier.
supposez un peu.svg est incorporé dans l'objet de la balise :
<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 un <embed> balise:
<embed id="embedded-image" src="image.svg" type="image/svg+xml" />
L'image SVG est essentiellement dans un sous-document séparé load événement à celle de la principale document. 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
});
c'est mieux que de sonder car toute modification que vous apporterez à la SVG aura lieu avant qu'elle ne soit peinte, ce qui réduira le scintillement et l'effort CPU dépensé en peinture.
l'événement de charge de L'élément embedding (e.g. object) 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 de L'élément racine SVG:
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 */
}
recommandation du W3C SVG indique que getCurrentTime sur un SVGSVGElement:
renvoie l'heure courante en secondes par rapport à l'Heure de début du document SVG courant fragment. Si getCurrentTime est appelé avant que la ligne de scénario du document n'ait commencé (par exemple, en exécutant script dans un élément ‘script’ avant que L'événement SVGLoad du document ne soit envoyé), alors 0 est retourné.
en utilisant jQuery vous pouvez lier à L'événement de chargement de fenêtre Erik mentions avec:
$(window).load(function(){
var svg = document.getElementById("chart").getSVGDocument();
});
vous pouvez affecter un gestionnaire d'événements onload à un élément de votre document SVG et le faire 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 moment où l'agent utilisateur a entièrement analysée l'élément et de ses descendants, et est prêt à agir de manière appropriée sur l'élément