Cannot read property 'contentDocument' of null

Question

I have an SVG map that is niserted into HTML with help of the 'object' tag. Then, I try to use jQuery to access map's elements. (In particular I try to fill a rectangular in red.)

HTML:

<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>

jQuery:

jQuery(window).load(function () {
        var svgobject = document.getElementById('map');
        if ('contentDocument' in svgobject) {
            var svgdom = jQuery(svgobject.contentDocument);
            jQuery("#rect4578", svgdom).attr("fill", "red");
        }
    });

In chrome I get an error: Cannot read property 'contentDocument' of null (anonymous function) n.event.duspatch n.event.add.r.handle

What is the problem?

Thank you.

Solution

Are you getting this error only in chrome? Debug the code and look at this line in your code

var svgobject = document.getElementById('map')

What do you get in return here? Is the svgobject null? Because your id is not "map" its "imap"

Comments

[plywoods]

Yes it was 'imap' i was not so attentive. However, now I got the following message: Uncaught Security error: Failed to read the 'contentDocumant' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin 'null'. Protocols, domains, and ports must match.

[plywoods]

I found some discussion in this regards over here (in comments) - benfrain.com/selecting-svg-inside-tags-with-javascript. However, my html and svg aer stored locally on my PC. And it is not quite clear what I need to do to make it work.

[Pumpkin]

Try to search here on stackoverflow about your new problem or maybe these links will help you link link

[Pumpkin]

I am not sure about this issue. You should try to search first and if don't find any solution then you create a new question. Good luck!