मोजिला फायरफॉक्स addEventListener में लोड एसवीजी वस्तुओं doen't ('लोड'

मैं पता नहीं क्यों, लेकिन यह क्रोम और सफारी पर काम करता है, मोज़िला में नहीं। मैं object HTML टैग कि svg फाइल लोड कर सकते है। फ़ाइल .s0 शामिल कक्षाएं। मैं घटना को संभालने के लिए जब आप उस वर्ग पर क्लिक करें।मोजिला फायरफॉक्स addEventListener में लोड एसवीजी वस्तुओं doen't ('लोड'

कौन जानता है कि क्या गलत है? 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); 
      } 
     }); 
});

स्रोत

2015-09-14 sirjay

मुख्य रूप से आपको jquery का उपयोग करने का निर्णय लेने की आवश्यकता है या नहीं और मूल जावास्क्रिप्ट-कोड के साथ jquery-code मिश्रण न करें।

जावास्क्रिप्ट संस्करण:

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

उबंटू 14.04.3 LTS, फ़ायरफ़ॉक्स 40.0.3

स्रोत

2015-09-17 08:10:04 cetver

आपके उत्तर के लिए धन्यवाद। मुझे अजीब चीज मिली है: क्या आप jquery संस्करण में अपना कोड काम करते हैं यदि आप v2.1.4 को v1 में बदलते हैं? उदाहरण: ''। मुझे नहीं पता क्यों, लेकिन v1 के लिए यह काम नहीं करता है। – sirjay

पुष्टि करें कि पुराने संस्करण में काम नहीं कर रहा है (क्यों नहीं पता), लेकिन आप मूल घटना का उपयोग कर सकते हैं: '$ obj.get (0) .onload = function() { console.log ('OK'); }; ' – cetver

यह <svg> टैग का उपयोग करना बेहतर है, बजाय <object>। फ़ायरफ़ॉक्स <embed> के साथ वैसे भी बेहतर काम करता है। यदि आप टैग के अंदर svg कोड डाल सकते हैं तो सभी ठीक काम करते हैं।

आप <embed> टैग के साथ की कोशिश कर सकते हैं:

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

मैं क्योंकि आप एक आसान तरीका में CSS और Javascript के साथ अंदर सभी तत्वों को नियंत्रित कर सकते हैं, <svg> टैग का उपयोग करने के लिए आप की सिफारिश:

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

और शायद, राफेल जेएस आपके लिए एक अच्छी लाइब्रेरी है।

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/

हालांकि, आपको करना चाहिए @ केटर आपको अपने उत्तर में सुझाव देते हैं, jQuery और देशी जेएस कोड को मिश्रण न करें।

सभी सिफारिशों के साथ, आप लोडिंग सामग्री के एक सरल तरीके से प्राप्त कर सकते हैं।

शुभकामनाएं।

स्रोत

2015-09-17 08:25:50

मैं इसे का उपयोग करके हल:

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

यह Chrome, Firefox और IE9 + पर काम करता है।

स्रोत

2016-08-30 06:36:53 naortor

मोजिला फायरफॉक्स addEventListener में लोड एसवीजी वस्तुओं doen't ('लोड'

उत्तर

संबंधित मुद्दे