Mozilla Firefox не загружает объекты SVG в addEventListener ('load')

Я не знаю почему, но он работает на Chrome и Safari, а не в Mozilla. У меня есть тег object html, который загружает файл svg. Файл содержит .s0 классы. Я хочу обработать событие, когда вы нажимаете на этот класс.

Кто знает, что не так? sry, jsfiddle не показывает object, когда я пытался там вставить код.

<object data="jo.svg" type="image/svg+xml" id="obj"></object>

код

$(function() {
    var a = document.getElementById('obj');
        a.addEventListener("load", function() {

            // !!!
            console.log('this line is not reachable in Mozilla or reached before svg loaded');

            var svgDoc = a.contentDocument;
            var els = svgDoc.querySelectorAll(".s0");
            for (var i = 0, length = els.length; i < length; i++) {
                els[i].addEventListener("click", function() {
                    alert('clicked');
                }, false);
            }
        });
});

Ответ 1

В первую очередь вам нужно решить использовать jquery или нет и не смешивать jquery-код с собственным javascript-кодом.

Версия Javascript:

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        var obj = document.getElementById('obj');
        obj.addEventListener('load', function(){
            console.log('loaded');
        });
    });
</script>
</body>
</html>

версия JQuery

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var $obj = $('#obj');
        $obj.on('load', function () {
            console.log('loaded');
        })
    });
</script>
</body>
</html>

Ubuntu 14.04.3 LTS, Firefox 40.0.3

Ответ 2

Лучше использовать тег <svg> вместо <object>. Firefox все равно работает с <embed>. Если вы можете поместить код svg внутри тега, все работает нормально.

Вы можете попробовать с тегом <embed>:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

Я рекомендую вам использовать тег <svg>, потому что вы можете легко управлять всеми элементами внутри CSS и Javascript:

https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction

И, может быть, Raphaël JS - хорошая библиотека для вас. Он позволяет управлять всем элементом SVG с помощью javascript и выполнять множество задач без сложности:

http://raphaeljs.com/

Это будет хорошо, если вы можете использовать библиотеку Modernizr.js, которая поможет вам определить, поддерживает ли браузер.

 if (!Modernizr.svg) {
    $(".logo img").attr("src", "images/logo.png");
 }

Чтобы включить modernizr: https://modernizr.com/

Вы можете прочитать эту интересную и полную статью, как использовать svg во всех вариантах:

https://css-tricks.com/using-svg/

Однако, вы должны сделать, что @cetver предложит вам в своем ответе, не смешивайте jQuery и собственный js-код.

Со всеми рекомендациями вы можете легко достичь загрузки содержимого.

Удачи.

Ответ 3

Я решил это, используя:

$('#svg').load('"image/svg+xml"', function () {
    alert('svg loaded');
});

Он работает на Chrome, Firefox и IE9 +.