Mozilla Firefox doesn't load SVG objects in addEventListener('load'

Asked 14/9, 2015 at 18:19 Answered 30/8, 2016 at 6:36

Solved javascript jquery html svg jquery-svg

I don't know why, but it works on Chrome and Safari, not in Mozilla. I have object html tag that loads svg file. File contains .s0 classes. I want to handle event when you click on that class.

Who knows what is wrong? sry, jsfiddle does not show object when I tried to paste code there.

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

Code

$(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);
            }
        });
});

Clyve answered 14/9, 2015 at 18:19 Comment(0)

Primarily you need to decide use jquery or not and do not mix jquery-code with native javascript-code.

Javascript version:

<!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 version

<!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

Duffey answered 17/9, 2015 at 8:10 Comment(2)

thank you for ur answer. I have found weird thing: does ur code in jquery version work if you change v2.1.4 to v1? example: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>. I don't know why, but for v1 it does not work. – Clyve 17/9, 2015 at 10:59

confirm that in old version not working (don't know why), but you can use native event: $obj.get(0).onload = function () { console.log('OK'); }; – Duffey 17/9, 2015 at 12:40

I solved it by using:

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

It works on Chrome, Firefox and IE9+.

Beckybecloud answered 30/8, 2016 at 6:36 Comment(0)

It's better to use <svg> tag, instead of <object>. Firefox works better with <embed> anyway. If you can put the svg code inside tag all works fine.

You can try with <embed> tag:

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

I recommend to you to use the <svg> tag, because you can control all elements inside with CSS and Javascript in a easy way:

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

And maybe, Raphaël JS is a good library for you. It allows to control all SVG element with javascript and make a lot of tasks without complexity:

http://raphaeljs.com/

It will be fine if you can use Modernizr.js library, that helps you detecting if there's browser support.

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

To include modernizr: https://modernizr.com/

You can read this interesting and complete article, with how to use svg in all variants:

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

However, you should make that @cetver suggest to you in his answer, don't mix jQuery and native js code.

With all recommendations, you can achieve in a simple way the loading content.

Good luck.

Adamite answered 17/9, 2015 at 8:25 Comment(0)

Recommended topics

Hot tags