2017-01-12 1 views
2

Ich versuche, das DOM eines SVG (eingebettet über die Embed-Tag und eine Daten-URL) mit Javascript aus dem übergeordneten Fenster zugreifen. Chrome bewertet die Daten-URL jedoch als Ursprungsverweis. Irgendeine Idee warum und wie man das verhindert? Leider habe ich keine Kontrolle über die Server-Seite, um Cross-Origin-Flags oder ähnliches zu setzen.Warum bewertet Chrome eine Daten-URL als Kreuzursprung?

Danke,

Andreas

var c = document.getElementById("myembed"); 
 
c.onload = function() { 
 
\t var s = c.getSVGDocument(); 
 
\t alert(s.tagName); 
 
}
<embed id="myembed" src="data:image/svg+xml;utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100px%22%20height%3D%22100px%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22stroke%3A%23ff0000%3B%20fill%3A%20%230000ff%22%2F%3E%3C%2Fsvg%3E" type="image/svg+xml"></embed>

+0

Warum einbetten Verwendung hier? embed ist für Plugins oder externe Anwendungen gedacht, daher ist es sinnvoll, es als fremd zu betrachten. –

+0

Liebe Denys, das ist eine längere Geschichte. Der Haupttreiber für die Verwendung von Embed war die Trennung der DOMs mehrerer in einer Seite eingebetteter SVGs. Falls die SVGs z.B. gleiche Klassennamen mit unterschiedlichen Stilen stören sie. Ich weiß, dass es andere Möglichkeiten gibt. Es war nur eine Frage von Interesse. –

Antwort

1

In diesem Fall Chrome ist nur the following requirement in the HTML spec konform:

Wenn die Document wurde aus einer data: URL generiert
        Ein eindeutiger opaker Ursprung zugewiesen, wenn die Document erstellt wird.

, die sich daraus ergibt sich, dass embed Element eine SVG-Dokument im DOM erstellt:

svg document in DOM created by embed element with data: URL

Und wenn Sie die Eigenschaften dieser SVG-Dokument in dem Dokument überprüfen, sehen Sie, dass Sein origin ist serialisiert als null (it’s actually a unique origin internally, but just gets serialized as null.)

+0

Sehr geehrte sideshowbarker, danke für die Erklärung der Hintergrund, die meine Frage war. Falls Sie eine Idee haben, das Problem zu umgehen, lassen Sie es mich bitte wissen. Danke, Andreas –

0

Sie können BLOBURL anstelle von DataURL verwenden. blobURL hat derzeit kein Problem mit Ursprungspunkten. Ich testete in Chrome 56.0

siehe Blob und objectURL.

html:

<embed id="myembed" type="image/svg+xml"></embed> 

js:

var url = URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/></svg>'], {type : 'image/svg+xml'})); 

var c = document.getElementById("myembed"); 
c.setAttribute('src', url); 
c.onload = function() { 
    var s = c.getSVGDocument(); 
    alert(s.tagName); 
}; 
Verwandte Themen