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

**URL:** <https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112>\
**Category:** Dashboard\
**Created:** [24 January 2023 09:10 UTC](https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112 "2023-01-24T09:10:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![94r4d0x](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/94r4d0x/32/74934_2.png) [@94r4d0x](https://discourse.nodered.org/u/94r4d0x)\
**Post date:** [24 January 2023 09:10 UTC](https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112/1 "2023-01-24T09:10:06Z")

</div>

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

```auto
<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:

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

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 January 2023 14:48 UTC](https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112/2 "2023-01-24T14:48:52Z")

</div>

> [@94r4d0x](#):
>
> but I need accesse to DOM

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.

> [@94r4d0x](#):
>
> also i use window loaded event and not work too

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.

---

<div class="post-metadata">

**Author:** ![94r4d0x](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/94r4d0x/32/74934_2.png) [@94r4d0x](https://discourse.nodered.org/u/94r4d0x)\
**Post date:** [24 January 2023 15:04 UTC](https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112/3 "2023-01-24T15:04:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 February 2023 15:05 UTC](https://discourse.nodered.org/t/how-to-accessing-a-dom-object-defined-in-an-external-svg-file-with-ui-template-node/74112/4 "2023-02-07T15:05:05Z")

</div>

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