Question

在FF和IE中，调用$(document ).ready()时会检索SVG（SVG）文档。

在Chrome中，getSVGDocument会在调用$(document ).ready()时返回null。（虽然它似乎发现它大约7ms后，如setTimeout所示。）

为什么Chrome在<embed>时没有找到加载的$(document ).ready() SVG文档，但FF和IE呢？

（我不想使用setTimeout(7ms)只是等待Chrome赶上来!!!因为那是......跛脚。）

下面的代码简单代码显示了Chrome中的场景： RETURNS SVGDocument RETURNS NULL （除非对getSVG()的呼叫延迟了7ms！ !!）。

N.B：此代码需要在localhost服务器上运行Chrome;这是一个单独的Chrome问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

    getSVG = function () {

        var el = document.getElementById("embedId");

        SVGDoc = el.getSVGDocument();

        console.log(SVGDoc);                           // returns null in Chrome

    }



    $(document).ready(function () {

        getSVG();                        

        //setTimeout("getSVG()", 7);      // this works, showing that Chrome is NOT "ready"

    });


</script>

</head>

<body>

<embed id="embedId" src="man.svg" type="image/svg+xml" width="50" height="50"/> 

</body>

</html>

Answer 1

您应该使用$（window）.load（）而不是$（document）.ready（）来等待加载的嵌入，iframe和图像

Answer 2

试试这个

$(window).load(function(){
    console.log($('#embedId')[0].getSVGDocument());
});

另一种可能的解决方案：

$(function(){
    var a = $('#embedId')[0];

    a.addEventListener("load",function(){

        //do stuff with 'a'

    },false);
});

在Chrome中，当触发$（document）.ready（）时，不会加载<embed />资源。为什么？

2 个答案: