jQuery SVG-object tag load event

问题

I have a page which dynamically adds SVGs to the page via jQuery:

grid.append($('<object>')
.load(function () {
    // do stuff
    alert('loaded')
})
.attr({
    id: 'tile',
    type: 'image/svg+xml',
    width: Math.round(tile_w),
    height: Math.round(tile_h),
    data: 'map/base.svg'
})
);

I need access to the SVG document (to "push" a variable into the svg script context) but the SVG has to be loaded for that. My problem is that I dont get the load event working. No alert is displayed.

How to do?

Edit: It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function (not supported by stupid IE, but this is no problem for me):

grid.append($('<embed>')
    .attr({
        id: 'tile' + i,
        type: 'image/svg+xml',
        width: Math.round(tile_w),
        height: Math.round(tile_h),
        src: 'map/base.svg'
     })
    .css({
        position: 'absolute',
        left: Math.round(p.x),
        top: Math.round(p.y)
    }).each(function (i){
        this.addEventListener ('load', function (e) {
            alert('loaded')
        })
    })
);

回答1:

I don't know what grid is in your example but if it is a normal dom element then the load api call should be of the format defined in the api docs. Currently it looks like you are trying to load a function call which doesn't make any sense.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

grid.append($('<object>').load('image.svg',
    function (response, status, xhr) {
        if (status == 'success') {
            // yay the load is ok
            alert('loaded');
        }
    })
);

http://api.jquery.com/load/

UPDATE: I haven't tried lodaing SVG data into the browser with HTML but the W3C docs don't mention that the <object> tag could be used for that. Their example uses <embed>

<embed src="circle1.svg" type="image/svg+xml" />

have you tried using that instead of <object>?

UPDATE 2:

I don't think the above solution will work either, since the JS onload event is supported by the following tags <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style> - I assume this is what jQuery is hooking into, thus it'll only work for those elements. The jQuery docs say that the event handler is supported by images, scripts, frames, iframes and the window object.

So indeed if that doesn't work, then I suppose you'll just need to use the .load() method call and handle the results. Maybe you can put the svg embed tags into separate html files, or have a script that generates the html embeds.

http://www.w3schools.com/jsref/event_onload.asp

UPDATE 3:

There would appear to be at least two correct solutions to this problem.

jQuery SVG plugin http://keith-wood.name/svg.html
a jQuery ajax() call detailed here including information about interacting with the svg canvas after load.

来源：https://stackoverflow.com/questions/12133181/jquery-svg-object-tag-load-event

标签

jquery

onload-event

object-tag