How to Accessing a DOM object defined in an external SVG file with UI template node

so I use UI template node to load External SVG file
because when copy ths code in template node directly
I cant depoly my change I see error The size of code its big .
now this file loaded and work in dashboard
but I need accesse to DOM
but not work
also i use window loaded event and not work too
any help

<object id="mysvg" type="image/svg+xml" height="600" data="http://127.0.0.1:8887/inlineCss_header.svg"></object>
<script>

(function(scope) {
    
    
    var svg = document.getElementById('mysvg').contentDocument
    console.log(svg);

scope.$watch('msg', function(data) {

});
})(scope);

    window.addEventListener('load', function () {
        console.log("  loaded")
       
               
                
            });
         
</script>

output:

#document
<html>
<head></head>
<body></body>
</html>

Not tried it with dashboard but I can't think why the DOM might not be accessible. Of course, it perhaps isn't the "Dashboard" way - since Dashboard uses AngularJS v1.

The reason I think it isn't working is that you've used an <object> tag rather than an img tag. I don't think an object is part of the DOM.

That's because, by the time the template is loaded, I believe that the window load event is long gone.

If you really want to use that, you will need to load the code into the head rather than the body. Dashboard allows for that.

problem it grab the content of the file for another domain
so has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I make GET http node to fatch external url
and load the content in internal path
127.0.0.1:1880/svg -> return content of http://127.0.0.1:8887/inlineCss_header.svg
and its work
so to fix that
fatch extarnet link and injected to div in UI template node
and manupulat the dom

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.