Home / Questions / 419056
Accepted
Ariel Montes
Asked: 2022-01-08 03:31:20 +0800 CST 2022-01-08 03:31:20 +0800 CST

How to access the content of the <object> tag in HTML?

  • 772

I am trying to access the content of a tag <object>that uploads a file. Specifically, I want to access the id of some of its elements and I've tried doing it with CSS and JavaScript, but nothing seems to work. I cannot access the id or classes of the elements that are loaded from the file.

The problem persists despite the type of file used, I have tried with html and svg files.

Label <object>:

<object id="obj" data="test.svg" type="image/svg+xml"></object>

SVG file:

<svg width="680" height="370" style="border-radius:30px" version="1.1" viewBox="0 0 179.91 97.897" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="test" d="m9.2398 47.875 22.601 6.4716 69.367 0.0251c0.68665 2.51e-4 1.4406-0.39775 1.4217-1.5326l-3.7e-4 -25.974-74.08-17.624z" fill="#333" opacity=".5" style="mix-blend-mode:color-dodge"/>
</svg>

JavaScript with which I try to access the id:

<!-- jQuery full con ajax -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script>
    $(window).on('load', function(){ 
        console.log( document.getElementById('test') )
        // Devuelve: null
    });

    $(document).ready(function(){
        console.log( document.getElementById('test') )
        // Devuelve: null
        
        console.log( $('#obj').contentDocument )
        // Devuelve: undefined
    });
</script>

CSS doesn't detect the id either:

#obj {color: red !important} /* No funciona */
#test {fill: red} /* No funciona */

The tag <embed src="..." \>behaves the same way

javascript

1 Answers

  1. Best Answer

    As long as SVGit is hosted on the same domain as the page, you can do it like this:

    • First look for the objectin the document
    • Then access contentDocumenttheobject
    • Finally it searches for idthe element inside thecontentDocument

    Example:

    $(function() {
    let element = document.getElementById('obj').contentDocument.getElementById('test');
    console.log(element);
});

    PS: I recommend you to read What is the difference between window.onload and $(document).ready()?

    • 1