jQuery SVG-object 标签加载事件答案

【问题标题】：jQuery SVG-object tag load eventjQuery SVG-object 标签加载事件
【发布时间】：2012-08-21 10:07:11
【问题描述】：

我有一个通过 jQuery 将 SVG 动态添加到页面的页面：

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'
})
);

我需要访问 SVG 文档（将变量“推送”到 svg 脚本上下文中），但必须为此加载 SVG。我的问题是我没有让加载事件工作。不显示任何警报。

怎么办？

编辑： 似乎 jQuery 只是阻止将“加载”事件绑定到非图像或文档元素，所以我只使用“官方”addEventListener() 函数（不是由愚蠢的IE支持，但这对我来说没问题）：

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')
        })
    })
);

【问题讨论】：

标签： jquery onload-event object-tag

【解决方案1】：

我不知道您的示例中的 grid 是什么，但如果它是一个普通的 dom 元素，那么 load api 调用应该是 api 文档中定义的格式。目前，您似乎正在尝试加载一个没有任何意义的函数调用。

.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/

更新：我没有尝试使用 HTML 将 SVG 数据加载到浏览器中，但 W3C 文档没有提到可以使用 <object> 标签。他们的例子使用<embed>

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

你试过用它代替<object>吗？

更新 2：

我认为上述解决方案也不会起作用，因为以下标签 <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style> 支持 JS onload 事件 - 我认为这是 jQuery 所挂钩的，因此它只适用于那些元素。 jQuery 文档说 images, scripts, frames, iframes 和 window 对象支持事件处理程序。

确实，如果这不起作用，那么我想您只需要使用.load() 方法调用并处理结果。也许您可以将 svg 嵌入标签放入单独的 html 文件中，或者拥有一个生成 html 嵌入的脚本。

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

更新 3：

这个问题似乎至少有两个正确的解决方案。

jQuery SVG 插件http://keith-wood.name/svg.html
一个 jQuery ajax() 调用详细 here 包括有关交互的信息加载后使用 svg 画布。

【讨论】：

在我看来，他试图将load 用作ajax 函数，而只是用作DOMload 事件处理程序。关于 DOM 加载和对象元素的 SO 有很多问题
嗯，我想加载事件，但 ajax 调用 api.jquery.com/load-event
问题stackoverflow.com/questions/5926424 是同一个问题，但没有提供解决方案。
不，当使用嵌入时，加载事件也不会触发。
@Euro 请参阅上面的更新 2 - 基本上 embed 标记不支持 javascript onload 事件，因此 jQuery 没有什么可以挂钩的。