0

我正在尝试覆盖一些 JavaScript 代码以优化我无法访问原始源代码的现有解决方案。它是一个基于 Liferay 的门户，带有一些渲染 SVG 图像的 portlet。SVG 用作图形导航元素，可用于深入研究技术服务模型。由于实现方式的原因，SVG 图像的加载和刷新可能会很慢。SVG 消失了几秒钟，因为刷新实际上向网络服务器发出了 2 个请求。首先，完整的对象标签在服务器端重新生成并重新插入到 dom 中。第一个请求的响应如下所示：

<div><object type="image/svg+xml" data="generateSvg.svg” width="100" height="300" name="svgId"> <param name="wmode" value="transparent"></object></div>

SVG 的实际请求从第一个响应文本插入 DOM 并删除原始对象标签时开始。因为 SVG 图像可能会变得相当复杂，并且软件的一些普遍缓慢，所以 SVG 会在 Web 浏览器接收和呈现时消失并返回。我想跳过第一步，并通过异步刷新 SVG 来确保图像不会“闪烁”。使用 jQuery，我能够覆盖原始 JavaScript 代码并获取 SVG 的 url 并执行 jQuery ajax 请求。我还可以将结果插入 DOM，但是当我将其作为内联 SVG 插入时，图像的呈现方式与嵌入对象标签时不同。svg 内容元素的某些部分被截断，当 SVG 作为带有外部 url 的对象标签添加时，不会发生这种情况。

我要么想将 SVG 嵌入到对象标签中并异步加载它的 url，要么想解决内联 SVG 的渲染问题。我无法更改 SVG 代码，因为它是现有软件的一部分。我有办法将异步加载的数据添加到对象标记而不将 url 添加到数据属性吗？

我用于添加 SVG 的 javascript 如下所示：

indentifier.loadSvg = (function(){
    if(this.svgUrl){                        
        $.ajax({
            url: this.svgUrl,
            //enclose the right div in which the svg should be loaded as a context
            context: $('#_layout_WAR_Portlets_INSTANCE_' + this.portalId + '_plugin'),
            dataType: 'xml'
            }).done(function(svgDoc) {
                //construct an svg node and add it to the DOM
                var svgNode = $('svg', svgDoc);
                var docNode = document.adoptNode(svgNode[0]);
                $(docNode).attr('width', '100%').attr('height', '300');
                this.html(docNode);
            });

    }
});
4

1 回答 1

0

我不确定它是否可能在对象标签内，但 Iframe 应该可以解决问题。您可以尝试使用 javascript 创建一个新的对象标签，加载 svg 并用新对象替换旧对象。它看起来像这样：

var datasrc = "#";

// Create new object tag
var newobj = jQuery('<obj>', {
    id: 'newobject',
    data: datasrc,
    type: 'image/svg+xml'
});
    // Set parameters
    jQuery('<param />', {
        name: 'src',
        value: datasrc
    }).appendTo('#newobj');
    jQuery('<param />', {
        name: 'wmode',
        value: 'transparent'
    }).appendTo('#newobj');

// Dynamically load content and replace when done
newobj.load(datasrc,function(){
    $('#objectwrapper').empty();
    newobj.appendTo('#objectwrapper');
    alert("succes"); // Just to check if this works!
});

JSFiddle：http: //jsfiddle.net/cfERU/9/

警报会触发两次，我相信这是 JSFiddle 的事情。

于 2013-10-10T09:26:51.890 回答