javascripthtmlxpathsvghigh-load

How to clone tag object with one get method?


How to make clones tag object with svg image data in one page. Without many get methods to the server. Sample of target page

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

This sample get graph.svg with many get requests to graph.svg. First request shows result 200 all following shows result 304, but i need without the following once.

I found attr declare, but next code doesn't work wo attr data in #tg1.

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

With data attr, tg1 sends following get requests.

How can i do this in html, wo js. Is it possible to receive data from current page by relative uri ~like xpath.

graph.svg is self render image. It's can be worked in shadow root(it's not variant now) in div. If can be one way - to use JS, how i can put XMLHttpRequesst result into the document in tag object?

Construction with elements like document.querySelector("..."). contentWindow/contentDocument/document/window/innerHTML = ... doesn't whork.

If js - need solution in pure js wo jquery and other frameworks. Firefox/Chrome.


Solution

  • I found next solution, with frames DOMs

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

    And we can emulate declare inside svg with frameElement.declare and window.parent.frames["..."]