Mozilla FirefoxはaddEventListenerのSVGオブジェクトを読み込みません（ 'load'

理由はわかりませんが、MozillaではなくChromeやSafariで動作します。 svgファイルをロードするhtmlタグがあります。クラス。私はあなたがそのクラスをクリックしたときに、イベントを処理したい。Mozilla FirefoxはaddEventListenerのSVGオブジェクトを読み込みません（ 'load'

誰が間違っている知っている？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とnative javascript-codeを混在させないでください。

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

出典

2015-09-17 08:10:04 cetver

お返事ありがとうございます。私は奇妙なことを発見しました：v2.1.4をv1に変更するとjQueryバージョンの作業でURコードが実行されますか？例： ''。理由は分かりませんが、v1ではうまくいきません。 – sirjay

古いバージョンでは動作していないことを確認します（理由はわかりませんが）ネイティブイベントを使用することができます： '$ obj.get（0）.onload = function（）{ console.log（ 'OK'）; }; ' – cetver

それは<svg>タグを使用することをお勧めします、の代わりに、 <object>。とにかくFirefoxは<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

そしておそらく、RaphaëlJSは良いライブラリです。それはJavaScriptを使用して、すべてのSVG要素を制御し、複雑させずにタスクの多くを行うことができます：

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とネイティブのjsコードを混ぜてはいけません。

すべての推奨事項では、読み込みコンテンツを簡単な方法で達成できます。

幸運。

出典

2015-09-17 08:25:50

私が使用して、それを解決：

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

それはクロム、FirefoxとIE9 +上で動作します。

出典

2016-08-30 06:36:53 naortor

Mozilla FirefoxはaddEventListenerのSVGオブジェクトを読み込みません（ 'load'

答えて

関連する問題