當data=base64，如何取到<object>的svg內容？

[ejsoon]

當data=base64，如何取到<object>的svg內容？

• 引用

帖子 由 ejsoon » 2023年 8月 15日 14:42

當<object/>的內容是：

代码： 全选

<object id="ejmondouter" data="ee.svg" type="image/svg+xml" width="auto" height="auto">object</object>

的時候，我是能夠通過：

代码： 全选

var ejmond = document.getElementById("ejmondouter");
ejmond.onload = function () {
	console.log('(this.contentDocument)', this.contentDocument);
};

拿到ee.svg的內容。

但是，如果我把ee.svg轉成base64，填入data，則無法通過上述方法拿到ee.svg的內容：

代码： 全选

<object id="ejmondouter" data="data:image/svg+xml;base64,PHN2ZyBpZD0iZWptb25kIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4MHB4IiBoZWlnaHQ9IjQ4MHB4IiBzdHlsZT0ibWF4LXdpZHRoOiAxMDAlOyI+PC9zdmc+Cg==" type="image/svg+xml" width="auto" height="auto">object</object>

那麼，我為何要把ee.svg轉成base64？因為它其實是一個空的svg，只有長寬的定義。ee.svg的內容是：

代码： 全选

<svg id="ejmond" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480px" height="480px" style="max-width: 100%;"/>

現在就想知道，為何data是base64之後，就取不到它的contentDocument，以及如何能夠取到。（在用瀏覽器查看html結構的時候，仍能見到它的svg內容，說明應該是有辦法取到的）

[ejsoon]

懂了: 當data=base64，如何取到<object>的svg內容？

• 引用

帖子 由 ejsoon » 2023年 8月 16日 07:17

data=base64時，是拿不到contentDocument的，因為涉及跨域，只有同域才能拿到。