2017-12-14 7 views
-1

サイト自体は - test.vancebeckett.com(それはアルファです、私はテキストを知っていて、他のいくつかのものは今や吸います、それはやり直されます)。SVG(または何か)をオブジェクトとして動的に読み込みます。 Chromeのセキュリティ機能

var p2ComicTileAttributes = ["class", "comicTiles p2Content", "id", "p2ComicTile", "type", "image/svg+xml", "data", "svg/p2Comic.svg", "onload", "p2Status++;p2Tiles.splice(0,1,this);"]; 
function loadPageSVGContent(attributesArray) { 
    var pageObj = document.createElement("object"); 
    for (var i = 0; i < attributesArray.length; i += 2) { 
     pageObj.setAttribute(attributesArray[i], attributesArray[i + 1]); 
    } 
    document.getElementById("contentLayout").appendChild(pageObj) 
}; 
loadPageSVGContent(p2ComicTileAttributes); 
/*This creates an objects, appends them in DOM, sets thair attributes and even runs thair inline code (onload) in Edge and FF, but do neither in Chrome-based browsers. Is this another Chrome safety feature? Like it can't load SVG's (or any other xml) from another domain and have an access to its DOM, it also doesn't allow do the same from local folder, only from the server. "contentLayout" - div-wrapper in HTML document. 
So, maybe there's a way to use ajax and somehow pass loaded document to "data" attribute? 
About performance, if I will inject SVG's in the html - these SVG's are 100-200KB each, and I have many. I'm sure it will slow down any DOM manipulations. And also I want to find the best way anyway :).*/ 

何に動作します:あなたはそれが「一部をクリックすることにより、エッジとFF(多分どこかにすぎ)にどのように動作するかを確認することができます JSファイルで :(例)動作していない何 :

EDIT 「目次」には「私の仕事」と「紹介」が含まれています。私が持っている

+0

最小限の例が便利です。 – david25272

+0

私たちに教えてくださいmain.js – zero298

+0

パフォーマンスはなぜ違うのですか?あなたはその仮定を何らかの形でテストしましたか? –

答えて

0

[OK]を、

とJSそれを見つけて、評価にマイナスを与えたことができなかった人のために自分自身をファイル:http://test.vancebeckett.com/main.js

(main.js要素点検 - - デバッガのか、FFで)ついに自分で解決しました! XMLHttpRequestを使用して.svgファイルをロードすると、ステータスが表示され、ロードされ、 "data"属性が "path/to/your/image.svg"に設定された "オブジェクト"ノードが作成され、 DOM - viola!アニメーション化されたsvg要素があり、HTMLでインラインではありません!

関連する問題