2011-10-05 18 views
6

私はSVGドキュメントを持っていて、その中にスクリプトを含めることができます(<script>タグを使用)。このスクリプトの中で、ドキュメントが読み込まれ、操作可能なときに呼び出される関数を設定したいと思います。SVG:ドキュメントがロードされたときにスクリプトを実行する

私がHTMLとJQueryでこれを行っていたのであれば、$(document).ready(...)を使用しています。私はSVGドキュメント内で同じことをしようとしているが、明らかに同じ方法でJQueryを使うことはできない。要約すると

、私が探しているようなものです:

test.svg:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> 
    <script type="text/ecmascript" xlink:href="myscript.js" /> 

    <!-- Rest of SVG body goes here --> 
</svg> 

myscript.js:

function init(evt) { 
    var svgDocument = evt.target.ownerDocument; 
    var svgRoot = svgDocument.documentElement; 
    // Manipulate SVG DOM here 
} 

// --> Somehow attach init() function to onload event of SVG <-- 

私が欲しいです明示的にに依存するのではなく、スクリプト内でこれを試して実行するはSVG定義にあります。 (私は、スクリプトがどのように動作するかについての知識を必要とせずに、いくつかのSVGに潜在的に含まれる可能性のあるスクリプトを書こうと思っています)

答えて

2

多分 'onload'はあなたが探しているイベントです。 IEの場合

document.addEventListener('load', init); 

を、あなたが通常使用する:SVGに埋め込まJSで標準のDOMイベントハンドラを使用してからあなたを妨げここ​​3210

+0

おそらく、私はSVG内で**(または少なくとも「

6

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" onload='init(evt)'> 
<script type="text/ecmascript"> 
function init(evt) { 
var svgDocument = evt.target.ownerDocument; 
var svgRoot = svgDocument.documentElement; 
// Do whatever you like on svgRoot to manipulate your SVG DOM 
} 
</script> 
</svg> 
+0

ありがとうございます。それはおおよそ私が達成したいことです。しかし、私がしたいのは、 ''タグに 'onload =" ... "'を追加する必要がないようにすることです。私はこれをより明確にするためにオリジナルの質問を更新しました(私は願っています!)。 – FixMaker

2

何も(ただしIE)の例ではありません見てattachEvent程度ですが、IE(> = 9)がSVGでこれをサポートしているかどうかはわかりません。

ほとんどの場合、SVGファイルはスタンドアロンなので、DOMReady(別名DOMContentLoaded)とロードイベントはそれほど離れていません(HTMLと比較すると、数十のCSSファイルとイメージをロードする必要があります)。 DOMReadyイベント(残念ながらまだ標準化されていない安定版)の代わりにイベントが無視されます。私が試みたことは別として、もしブラウザがSVGのDOMがロードされた時にDOMReadyイベントを発生させても。

2

svgドキュメントの最後にスクリプトを含めると、ロードイベントを待つ必要はありません。しかし、スクリプトが実行されたときにまだロードされていないファイル内の外部ファイルを参照している場合、この処理は失敗する可能性があります。

関連する問題