Как проверить, загружен ли внедренный документ SVG на html-страницу? - PullRequest
Новая
       23

Как проверить, загружен ли внедренный документ SVG на html-страницу?

32 голосов
/ 03 декабря 2008

Мне нужно отредактировать (используя javascript) документ SVG, встроенный в HTML-страницу.

Когда SVG загружен, я могу получить доступ к домену SVG и его элементам. Но я не могу знать, готов ли SVG dom или нет, поэтому я не могу выполнять действия по умолчанию в SVG при загрузке html-страницы.

Чтобы получить доступ к домену SVG, я использую этот код: 

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

где "chart" - идентификатор элемента для вставки.

Если я пытаюсь получить доступ к SVG, когда HTML-документ готов, таким образом: 

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

svg всегда равно нулю. Мне просто нужно знать, когда он не равен нулю, чтобы я мог начать манипулировать им. Вы знаете, есть ли способ сделать это?

Ответы [ 7 ]

22 голосов
/ 18 августа 2010

В ваш элемент встраивания (например, 'embed', 'object', 'iframe') в основной документ добавьте атрибут onload, который вызывает вашу функцию, или добавьте прослушиватель событий в сценарии, например, embeddingElm.addEventListener('load', callbackFunction, false). Другим вариантом может быть прослушивание DOMContentLoaded, в зависимости от того, для чего вы его хотите.

Вы также можете добавить загрузочный приемник к основному документу. jQuery(document).ready не означает, что все ресурсы загружены, просто то, что сам документ имеет DOM, готовый к действию. Однако обратите внимание, что если вы прослушиваете загрузку всего документа, ваша функция обратного вызова не будет вызываться до тех пор, пока не будут загружены все ресурсы в этом документе, css, javascript и т. Д.

Если вы используете встроенный svg, то jQuery(document).ready будет отлично работать.

В следующей заметке вы можете рассмотреть возможность использования embeddingElm.contentDocument (если доступно) вместо embeddingElm.getSVGDocument().

11 голосов
/ 26 ноября 2015

Для проверки можно использовать событие onload .

Предположим, что some.svg встроен в тег объекта: 

<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");
}
8 голосов
/ 02 октября 2013

Предполагается, что ваш SVG находится в теге <embed>: 

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

Изображение SVG по существу находится в поддокументе, который будет иметь отдельное событие load по сравнению с основным document. Однако вы можете прослушать это событие и обработать его: 

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

Это лучше, чем опрос, поскольку любые изменения, которые вы вносите в SVG, произойдут до того, как он будет впервые нарисован, уменьшая мерцание и затрачиваемое ЦП усилие, затраченное на рисование.

3 голосов
/ 31 декабря 2013

Я бы предпочел событие загрузки элемента встраивания (например, объекта), но, если по какой-то причине это не является жизнеспособным решением, единственный общий и надежный тест, который я нашел для SVG DOM ready, это метод getCurrentTime корневого элемента 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 */
}

Рекомендация W3C SVG гласит, что getCurrentTime для SVGSVGElement:

Возвращает текущее время в секундах относительно времени начала для текущего фрагмента документа SVG. Если getCurrentTime вызывается до начала временной шкалы документа (например, сценарием, выполняющимся в элементе «script» перед отправкой события SVGLoad документа), возвращается 0.

2 голосов
/ 13 ноября 2010

Используя jQuery, вы можете привязаться к событию загрузки окна, которое Эрик упоминает с помощью: 

$(window).load(function(){
    var svg = document.getElementById("chart").getSVGDocument();
});
0 голосов
/ 03 декабря 2008

Вы можете попробовать опрашивать время от времени. 

function checkReady() {
    var svg = document.getElementById("chart").getSVGDocument();
    if (svg == null) {
        setTimeout("checkReady()", 300);
    } else {
        ...
    }
}
0 голосов
/ 03 декабря 2008

Вы можете назначить обработчик события onload для элемента в вашем SVG-документе и заставить его вызывать функцию javascript на html-странице. загрузить карты в SVGLoad.

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

Событие запускается в тот момент, когда пользовательский агент полностью проанализировал элемент и его потомков и готов действовать соответствующим образом для этого элемента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...