问题
In FF and IE, the SVG (SVG) document is retrieved when $(document ).ready()
is called.
In Chrome, the getSVGDocument
returns null instead when $(document ).ready()
is called. (Although it seems to find it approx 7ms after, as shown by the setTimeout
.)
Why does Chrome not find the loaded <embed>
SVGdocument at moment of $(document ).ready()
, but FF and IE do?
(I don't want to have to use a setTimeout(7ms)
just to wait for Chrome to catch up!!! Because that's... lame.)
The code simple code below shows scenario: RETURNS SVGDocument in FF + IE RETURNS NULL in Chrome (unless the call to getSVG()
is delayed by 7ms!!!).
N.B: This code needs to be run on localhost
server with Chrome; that is a separate Chrome issue.
<!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>
回答1:
Try this
$(window).load(function(){
console.log($('#embedId')[0].getSVGDocument());
});
Another possible solution:
$(function(){
var a = $('#embedId')[0];
a.addEventListener("load",function(){
//do stuff with 'a'
},false);
});
回答2:
You should use $(window).load() instead of $(document).ready() to wait for loaded embbeds, iframes and images
来源:https://stackoverflow.com/questions/13013795/in-chrome-embed-resource-isnt-loaded-when-document-ready-is-triggered