如何使用一个 get 方法克隆标签对象？

Question

如何在一页中使用svg图像数据制作克隆标签对象。没有很多获取服务器的方法。目标页面示例

<!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，其中许多获取请求 graph.svg。第一个请求显示结果 200，所有后续请求都显示结果 304，但我不需要以下一次。

我找到了 attr 声明，但下一个代码无法在 #tg1 中使用 wo 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>

使用数据属性，tg1 发送以下获取请求。

我如何在 html 中执行此操作，wo js。是否可以通过相对 uri ~like xpath 从当前页面接收数据。

graph.svg 是自渲染图像。它可以在 div 的 shadow root 中工作（现在不是变体）。如果可以是一种方式 - 使用 JS，我如何将 XMLHttpRequesst 结果放入标记对象中的文档中？

使用 document.querySelector("...") 等元素构建。 contentWindow/contentDocument/document/window/innerHTML = ... 不犯贱

如果 js - 需要纯 js wo jquery 和其他框架的解决方案。 Firefox/Chrome.

Answer 1

是的。可以创建 object tag 的 clone，您可以使用 clone。请按照演示 Link.

DEMO

Answer 2

我找到了下一个解决方案，带有框架 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 内部的声明

如何使用一个 get 方法克隆标签对象？

How to clone tag object with one get method?

html

javascript

xpath

svg

high-load