4

1ページにsvg画像データのクローンタグオブジェクトを作る方法。サーバーへの get メソッドが多くない場合。対象ページのサンプル

<!DOCTYPE html>
...
<object id="tg0" data="graph.svg" type="image/svg+xml" some_my_value="234"></object>
<object id="tg1" data="graph.svg" type="image/svg+xml" some_my_value="123"></object>
...

このサンプルは、graph.svg への多数の get 要求を使用して、graph.svg を取得します。最初のリクエストでは結果 200 が表示され、その後はすべて結果 304 が表示されますが、次のものが 1 回も必要ありません。

attr 宣言を見つけましたが、次のコードは #tg1 の attr データでは機能しません。

<object declare id="tg0" data="graph.svg" type="image/svg+xml"></object>
<object id="tg1" type="image/svg+xml">
    <param valuetype="object" value="#tg0">
</object>

data attr では、tg1 は次の get 要求を送信します。

html、wo jsでこれを行うにはどうすればよいですか。現在のページから相対 uri ~like xpath でデータを受け取ることは可能ですか?

graph.svg は自己レンダリング イメージです。div のシャドウ ルート (現在はバリアントではありません) で作業できます。1 つの方法である場合 - JS を使用するには、どのように XMLHttpRequest の結果をタグ オブジェクトのドキュメントに入れることができますか?

document.querySelector("...") などの要素を使用した構築。contentWindow/contentDocument/document/window/innerHTML = ... うまくいきません。

js の場合 - jquery やその他のフレームワークではなく、純粋な js でのソリューションが必要です。ファイアフォックス/クローム。

4

2 に答える 2

0

はい。の作成と使用がclone可能object tagですclone。デモリンクに従ってください。

デモ

于 2015-05-06T06:13:08.573 に答える
0

フレームDOMを使用して、次の解決策を見つけました

<object id="tg0" data="graph.svg" type="image/svg+xml"></object>
<!--tg0 can be iframe-->

<iframe id="tg1" class="tg" type="image/svg+xml"></iframe>
<object id="tg2" class="tg" type="image/svg+xml"></object>
<!--iframe Firefox and Chrome; object work in Chrome only-->    

<script>
    //some control to onload current page and #tg0

    //We can get data from tag object or iframe
    var tg0_TXT=window.frames['tg0'].contentDocument.rootElement.outerHTML;

    //Or get it from XMLHttpRequest
    var dataReq = new XMLHttpRequest();
    //...
    var tg0_TXT=dataReq.responseText;


    var trgIframes=document.querySelectorAll(".tg");
    for(var ic0=0; ic0<trgIframes.length; ic0++) {
        //Select id, because window.frames works with id
        var idc=trgIframes[ic0].id;

        //Firefox doesnt want write in empty contentDocument in object
        //so #tg2 in Firefox is empty
        if(window.frames[idc].contentDocument) {
            //wo open/close scripts inside svg doesn't starts
            window.frames[idc].contentDocument.open(); 
            window.frames[idc].contentDocument.write( tg0_TXT );
            window.frames[idc].contentDocument.close();
        }
    }
};
</script>

また、frameElement.declare と window.parent.frames["..."] を使用して、svg 内の宣言をエミュレートできます。

于 2015-05-07T06:08:54.073 に答える