如何檢查嵌入的SVG文檔是否加載到html頁面中？

我需要編輯（使用JavaScript）一個嵌入在html頁面的SVG文檔。如何檢查嵌入的SVG文檔是否加載到html頁面中？

當SVG加載時，我可以訪問SVG及其元素的dom。但是我無法知道SVG dom是否準備好，所以我無法在加載html頁面時在SVG上執行默認操作。

要訪問SVG DOM，我使用此代碼：

var svg = document.getElementById("chart").getSVGDocument();

其中「圖表」是嵌入元素的id。

如果我嘗試訪問SVG當HTML文檔就緒，以這樣的方式

jQuery(document).ready(function() { 
var svg = document.getElementById("chart").getSVGDocument(); 
...

SVG總是空。我只需要知道它何時不是空的，所以我可以開始操作它。你知道是否有辦法做到這一點？

來源

2008-12-03 alexmeia

刪除嵌入標記 – Ilya 2008-12-03 16:26:45

-5

你可以嘗試投票每隔一段時間。

function checkReady() { 
    var svg = document.getElementById("chart").getSVGDocument(); 
    if (svg == null) { 
     setTimeout("checkReady()", 300); 
    } else { 
     ... 
    } 
}

來源

2008-12-03 14:53:50 Mocky

是的，它的工作原理。沒有考慮超時解決方案...謝謝你。 – alexmeia 2008-12-03 15:15:29

+21

輪詢不是這樣做的好方法。改用'load'事件監聽器。 – 2010-08-18 09:09:41

@ErikDahlström`load`事件監聽器有問題。 – Flimm 2017-10-17 13:26:07

您可以爲SVG文檔中的元素指定一個onload事件處理函數，並讓它在html頁面中調用一個javascript函數。將映射到SVGLoad。

http://www.w3.org/TR/SVG11/interact.html#LoadEvent

該事件被觸發時，在該用戶代理已經完全解析元素和它的後代並準備在該元素採取適當行動的地步

來源

2008-12-03 14:37:32 Mocky

不，我不能編輯SVG文檔。我只是可以在網頁中操作它。 – alexmeia 2008-12-03 14:40:43

在您的嵌入元素的主文檔中（例如「嵌入」，「對象」，「IFRAME」）添加onload屬性，它調用你的函數，或在腳本中添加事件偵聽器，e.g embeddingElm.addEventListener('load', callbackFunction, false)。另一種選擇可能是傾聽DOMContentLoaded，取決於你想要的。

您還可以在主文檔中添加一個負載監聽器。 jQuery(document).ready並不意味着所有的資源都被加載，只是文檔本身有一個準備採取行動的DOM。但是請注意，如果您在整個文檔中監聽負載，則直到該文檔中的所有資源都已加載，css，javascript等纔會調用回調函數。

如果使用內聯svg，則jQuery(document).ready將工作得很好然而。

在進一步的說明中，您可能需要考慮使用embeddingElm.contentDocument（如果有）而不是。

來源

2010-08-18 09:19:02

如果embeddingElm在腳本運行時已經加載，embeddingElm.addEventListener（'load'，callbackFunction，false）將不起作用。如果您鏈接SVG中的圖像（如背景圖像），DOMContentLoaded將不起作用。你（不應該）想要做的事情：類似於：window.onload，因爲那樣你就必須等到所有的外部資源都下載了（比如跟蹤腳本和廣告） – jBoive 2015-08-11 21:46:21

你也知道如何在Angular測試中的SVG對象上觸發此加載事件偵聽器？ – 2015-08-26 13:32:56

使用jQuery可以綁定到窗口加載事件埃裏克有提到：

$(window).load(function(){ 
    var svg = document.getElementById("chart").getSVGDocument(); 
});

來源

2010-11-13 07:48:48 Boermans

假設你的SVG處於<embed>標籤：

<embed id="embedded-image" src="image.svg" type="image/svg+xml" />

的SVG圖像基本上是在子文件將有一個單獨的load事件到主要document的事件。但是，你可以聽此事件，並處理它：

var embed = document.getElementById("embedded-image"); 
embed.addEventListener('load', function() 
{ 
    var svg = embed.getSVGDocument(); 
    // Operate upon the SVG DOM here 
});

這比輪詢爲您對SVG之前，先塗上，減少閃爍和CPU力氣花在繪畫會發生任何修改好。

來源

2013-10-02 15:49:18

嵌入元素（例如對象）的加載事件是我的首選項，但是，如果由於某種原因，這不是一個可行的解決方案，我發現SVG DOM準備就緒的唯一通用和可靠的測試是getCurrentTime的SVG根元素的方法，包括：

var element = document.getElementById('elementId'); 
var svgDoc = element.contentDocument; 
var svgRoot = svgDoc ? svgDoc.rootElement : null; 

if (svgRoot 
    && svgRoot.getCurrentTime 
    && (svgRoot.getCurrentTime() > 0)) 
{ 
    /* SVG DOM ready */ 
}

的W3C SVG recommendation指出getCurrentTime上SVGSVGElement：

返回相對於所述起始時間用於當前SVG文檔片段秒當前時間。如果在文檔時間軸開始之前調用getCurrentTime（例如，在調度文檔的SVGLoad事件之前，腳本在「腳本」元素中運行），則返回0。

來源

2013-12-31 10:09:19

你可以使用一個的onload事件的檢查。

假設some.svg被嵌入對象標記：

<body>  
<object id="svgholder" data="some.svg" type="image/svg+xml""></object> 
</body>

Jquery的

var svgholder = $('body').find("object#svgholder"); 

svgholder.load("image/svg+xml", function() { 
    alert("some svg loaded"); 
});

的javascript

var svgholder = document.getElementById("svgholder"); 

svgholder.onload = function() { 
    alert("some svg loaded"); 
}

來源

2015-11-26 09:32:49

如何檢查嵌入的SVG文檔是否加載到html頁面中？

回答

相關問題