1

htmlスニペットをブラウザに動的に送信しています。このスニペットには、SVGJavascript の一部が含まれています。

<div class="traffic-map-wrap">
    <embed id="traffic-map" type="image/svg+xml" class="traffic-map" src="{traffic-map-svg}" />
</div>

<script>
  $(function() {
    svgPanZoom('#traffic-map', {
      zoomEnabled: true,
      controlIconsEnabled: false,
      minZoom: 0.1,
      maxZoom: 10000
    });
  });
</script>

スニペットの関数は正常に実行されますが、が完全に読み込まれるsvgPanZoom前に実行されているため、 は失敗します( )。一方、 を導入して数秒待ってからクリックすると、すべて正常に動作します。SVGTypeError: e.getSVGDocument(...) is nullalert()

<script>
  $(function() {
    alert();
    svgPanZoom('#traffic-map', {
      zoomEnabled: true,
      controlIconsEnabled: false,
      minZoom: 0.1,
      maxZoom: 10000
    });
  });
</script>

明らかにこれは素晴らしい解決策ではないので、すべてがロードされた後に動的にロードされたスクリプトを実行するにはどうすればよいですか? $(window).load(function(){...});?に相当するもの

4

1 に答える 1

2

SVG が読み込まれたかどうかを再帰的に確認してみてください...

$(function() {
    svgPanZoom_launcher();
});

function svgPanZoom_launcher() {
    var svg = document.getElementById("traffic-map").getSVGDocument();
    if (svg == null) {
        setTimeout("svgPanZoom_launcher()", 400);
    } else {
        svgPanZoom('#traffic-map', {
            zoomEnabled: true,
            controlIconsEnabled: false,
            minZoom: 0.1,
            maxZoom: 10000
        });
    }
}
于 2015-08-07T13:49:07.463 に答える