Mozilla Firefox doen't tải các đối tượng SVG trong addEventListener ('load'

Tôi không biết tại sao, nhưng nó hoạt động trên Chrome và Safari, không có trong Mozilla. Tôi có thẻ html object tải tệp svg. Tệp chứa .s0 lớp học. tôi muốn để xử lý sự kiện khi bạn click vào lớp đó.Mozilla Firefox doen't tải các đối tượng SVG trong addEventListener ('load'

Ai biết được những gì là sai? sry, jsfiddle không hiển thị object khi tôi đã cố gắng để dán mã đó.

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

mã

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

Nguồn

2015-09-14 sirjay

Chủ yếu bạn cần quyết định sử dụng jquery hay không và không trộn mã jquery với mã javascript gốc.

Javascript phiên bản:

<!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 phiên bản

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

Nguồn

2015-09-17 08:10:04 cetver

cảm ơn bạn đã trả lời ur. Tôi đã tìm thấy điều kỳ lạ: không mã ur trong phiên bản jquery làm việc nếu bạn thay đổi v2.1.4 để v1? ví dụ: ''. Tôi không biết tại sao, nhưng đối với v1 nó không hoạt động. – sirjay

xác nhận rằng trong phiên bản cũ không hoạt động (không biết tại sao), nhưng bạn có thể sử dụng sự kiện gốc: '$ obj.get (0) .onload = function() { console.log ('OK'); }; ' – cetver

Nó tốt hơn để sử dụng <svg> thẻ, thay vì <object>. Tuy nhiên, Firefox hoạt động tốt hơn với <embed>. Nếu bạn có thể đặt mã svg bên trong, tất cả các thẻ đều hoạt động tốt.

Bạn có thể thử với <embed> tag:

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

Tôi khuyên bạn nên bạn sử dụng thẻ <svg>, bởi vì bạn có thể kiểm soát tất cả các yếu tố bên trong với CSS và Javascript một cách dễ dàng:

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

Và có thể, Raphaël JS là thư viện tốt cho bạn. Nó cho phép kiểm soát tất cả yếu tố SVG với javascript và kiếm được nhiều nhiệm vụ mà không phức tạp:

http://raphaeljs.com/

Nó sẽ ổn thôi nếu bạn có thể sử dụng Modernizr.js thư viện, giúp bạn phát hiện nếu có hỗ trợ trình duyệt .

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

Để đưa Modernizr: https://modernizr.com/

Bạn có thể đọc bài viết này thú vị và đầy đủ, với cách sử dụng svg trong tất cả các phiên bản:

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

Tuy nhiên, bạn nên chắc rằng @ cetver đề xuất với bạn trong câu trả lời của anh ta, đừng trộn jQuery và mã js riêng.

Với tất cả các đề xuất, bạn có thể đạt được một cách đơn giản với nội dung tải.

Chúc may mắn.

Nguồn

2015-09-17 08:25:50

Tôi giải quyết nó bằng cách sử dụng:

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

Nó hoạt động trên Chrome, Firefox và IE9 +.

Nguồn

2016-08-30 06:36:53 naortor

Mozilla Firefox doen't tải các đối tượng SVG trong addEventListener ('load'

Trả lời

Các vấn đề liên quan