How to clone tag object with one get method?

Question

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.

score 0 · Answer 1 · answered May 06 '15 at 06:13

0

Yes. It is possible to create clone of object tag and you can use that clone. Please follow the demo Link.

DEMO

answered May 06 '15 at 06:13

Jaimin Soni

1,061
1
13
29

It's send following request with result 304 – Anton Riab May 06 '15 at 07:01
1

Simple clone is not problem. Problem - many requests to server, when object have clones. – Anton Riab May 06 '15 at 07:08

Anton Riab · Accepted Answer · 2015-05-07T06:39:38.413

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["..."]

How to clone tag object with one get method?

2 Answers2