Jak sprawdzić, czy osadzony dokument SVG jest załadowany na stronę HTML?

Question

Potrzebuję edytować (używając javascript) dokumentu SVG osadzonego na stronie HTML.

Po załadowaniu SVG, uzyskuję dostęp do strony SVG i jej elementów. Ale nie jestem w stanie dowiedzieć się, czy dom SVG jest gotowy, czy nie, więc nie mogę wykonywać domyślnych akcji na SVG, gdy ładowana jest strona HTML.

Aby uzyskać dostęp do DOM SVG, używam tego kodu:

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

gdzie "wykres" jest id elementu embed.

Gdy próbuję otworzyć SVG kiedy dokument HTML jest gotowy, w ten sposób:

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

SVG jest zawsze zerowa. Po prostu muszę wiedzieć, kiedy nie jest zerowy, więc mogę zacząć nim manipulować. Czy wiesz, czy jest jakiś sposób na zrobienie tego?

Answer 1

Można spróbować odpytywanie tak często.

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

Answer 2

Możesz przypisać funkcję obsługi zdarzenia onload do elementu w dokumencie SVG i wywołać funkcję javascript na stronie html. przeładuj mapy na SVGLoad.

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

Zdarzenie jest wywoływane w momencie, w którym środek Filmaster pełni analizowany element i jego potomków i jest gotowy do działania odpowiednio na tym elemencie

Answer 3

na elemencie osadczym (np „embed”, „obiekt”, „iframe”) w dokumencie głównym dodać atrybut onload który wywołuje czynność lub dodać detektor zdarzeń w skrypcie, np embeddingElm.addEventListener('load', callbackFunction, false). Inną opcją może być słuchanie DOMContentLoaded, w zależności od tego, czego chcesz.

Możesz także dodać detektor ładunku w dokumencie głównym. jQuery(document).ready nie oznacza, że ​​wszystkie zasoby są załadowane, tylko sam dokument ma DOM gotowy do działania. Należy jednak pamiętać, że funkcja "oddzwanianie" nie zostanie wywołana, dopóki nie załaduje się wszystkich zasobów w tym dokumencie, css, javascript itp.

Jeśli użyjesz wbudowanego svg, wtedy zadziała jQuery(document).ready jednak.

W dalszej notatce warto rozważyć użycie embeddingElm.contentDocument (jeśli jest dostępna) zamiast embeddingElm.getSVGDocument().

Answer 4

jQuery można powiązać ze zdarzeniem obciążenia okno Erik wymienia się:

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

Answer 5

Zakładając, że SVG jest w <embed> tagu:

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

SVG obraz jest zasadniczo w pod- dokument, który będzie miał osobne wydarzenie load do zdarzenia głównego .Można jednak nasłuchiwać tego zdarzenia i obsługiwać go:

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

To jest lepsze niż odpytywanie jako jakiejkolwiek modyfikacji można zrobić z SVG nastąpi przed pierwszym malowane, co zmniejsza migotanie i CPU wysiłek poświęcony obraz.

Answer 6

Zdarzenie load elementu osadzającego (np. Obiekt) byłoby moim wyborem, ale jeśli z jakiegoś powodu nie jest to realne rozwiązanie, jedynym generycznym i niezawodnym testem, jaki znalazłem dla SVG DOM ready, jest getCurrentTime metoda elementu głównego 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 */ 
} 

w W3C SVG recommendation stwierdza, że ​​getCurrentTime na SVGSVGElement:

zwraca aktualny czas w sekundach w stosunku do czasu początkowego dla bieżącego fragmentu dokumentu SVG. Jeśli funkcja getCurrentTime zostanie wywołana przed rozpoczęciem osi czasu dokumentu (na przykład przez uruchomienie skryptu w elemencie "script" przed wywołaniem zdarzenia SVGLoad dokumentu), zwracane jest 0.

Answer 7

Można użyć onload wydarzenie dla czeku.

Załóżmy some.svg jest osadzony w znaczniku obiektów:

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