Question

我的机器人（我的设备有4.1.2）本机浏览器和机器人Chrome有问题。我用SVG和onload事件构建了一个HTML5 webapp。我像这样包含了SVG（并由W3C重新编写）

<object id="svgContent" data="file.svg" onload="MyMethod();">
    Your browser did not support SVG
</object>

我的JS功能看起来像这样

function MyMethod() {
    $('#svgContent').attr('style', 'display:none;');
    var iIntervalID = window.setInterval(function(){
        $('#svgContent').attr('style', 'display:block;');
        clearInterval(iIntervalID);
    }, 100);
}

我的问题是，onload事件是由display-style attroibute的修改触发的，所以它是一个调用循环（事件一直触发）。桌面版的chrome和firefox没有这种奇怪的行为。有没有人有一个想法如何解决这个问题？

对于那些将要问的人，我想在加载后重新显示SVG，将svg重新缩放到容器的整个宽度。默认情况下，svg具有自己的视图框大小，宽度和高度100％不起作用（只有绝对值有效，但这不是响应式设计）。隐藏和显示在桌面浏览器上修复此问题，但导致android上的问题。也许，你有任何其他的想法，如何在没有“黑客”的情况下将SVG带到全宽。

Answer 1

在设置clearInterval之前，您是否尝试过调用display:block？在移动设备上重新绘制svg可能并不是不可能的，并且完全有可能因为你使用setInterval在display:block更新完成之前将再次调用回调。< / p>

你也可以使用setTimeout，它不会每隔X毫秒重复调用一次。

您还应该知道，像这样更改width，height或display通常会导致页面重排，这可能会影响移动设备的性能。

Answer 2

似乎不可能在Android下使用SVG上的onload-functions（几分钟之前也有类似的问题）。你能做什么和应该做的是：

在文本编辑器中编辑SVG并将这样的内容添加到inital -tag：

width="100%" height="100%" viewBox="0 0 16 16"

确保使用正确的尺寸编辑视图框。我不知道插入，但如果你使用，这将工作正常。

Onload-Event不会停止在android上

2 个答案: