Question

目标是访问和编辑通过iFrame使用Base64数据URI呈现的SVG文档。

即使iFrame是通过数据URI在本地呈现的，访问SVG文档也会产生跨域错误。

通过带有数据URI的iFrame访问呈现的SVG文档的正确方法是什么？

jquery.min.js：2未捕获的DOMException：阻止了具有原始帧访问跨域框架的结果为“ http://localhost:3000”。在新的w.fn.init（https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:25204）在w（https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:896）在getSVGElemTest（http://localhost:3000/javascripts/editorView.js?1552693529:231:18）在：1：1

代码

function getSVGElemTest() {
   var svgElem = $("#svgTest iframe")[0].contentWindow).find("svg").first();

   return svgElem;
}

HTML

<div id="svgTest">
<iframe src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA0MzguNTMzIDQzOC41MzMiIHN0eWxlPSItLWhwLWNvbG9yLTN5TmhTQWhpLTE6dXJsKFwjY29sb3ItM3lOaFNBaGktMSk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIiBkYXRhLWhwLWNvbG9yLXByZXBhcmVkPSJ0cnVlIj48bGluZWFyR3JhZGllbnQgaWQ9ImNvbG9yLTN5TmhTQWhpLTEiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMjQxLDM5LDE3KSIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9InJnYigyNDUsMTc1LDI1KSIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48Zz48Zz4KCTxwYXRoIGQ9Ik00MDkuMTMzLDEwOS4yMDNjLTE5LjYwOC0zMy41OTItNDYuMjA1LTYwLjE4OS03OS43OTgtNzkuNzk2QzI5NS43MzYsOS44MDEsMjU5LjA1OCwwLDIxOS4yNzMsMCAgIGMtMzkuNzgxLDAtNzYuNDcsOS44MDEtMTEwLjA2MywyOS40MDdjLTMzLjU5NSwxOS42MDQtNjAuMTkyLDQ2LjIwMS03OS44LDc5Ljc5NkM5LjgwMSwxNDIuOCwwLDE3OS40ODksMCwyMTkuMjY3ICAgYzAsMzkuNzgsOS44MDQsNzYuNDYzLDI5LjQwNywxMTAuMDYyYzE5LjYwNywzMy41OTIsNDYuMjA0LDYwLjE4OSw3OS43OTksNzkuNzk4YzMzLjU5NywxOS42MDUsNzAuMjgzLDI5LjQwNywxMTAuMDYzLDI5LjQwNyAgIHM3Ni40Ny05LjgwMiwxMTAuMDY1LTI5LjQwN2MzMy41OTMtMTkuNjAyLDYwLjE4OS00Ni4yMDYsNzkuNzk1LTc5Ljc5OGMxOS42MDMtMzMuNTk2LDI5LjQwMy03MC4yODQsMjkuNDAzLTExMC4wNjIgICBDNDM4LjUzMywxNzkuNDg1LDQyOC43MzIsMTQyLjc5NSw0MDkuMTMzLDEwOS4yMDN6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjZmZmZmZmIiBmaWxsPSIjZmZmZmZmIiBzdHlsZT0iZmlsbDogdmFyKC0taHAtY29sb3ItM3lOaFNBaGktMSk7Ii8+CjwvZz48L2c+IDwvc3ZnPg=="></iframe>
</div>

更新@Kaiido的答案：

const svgElem = DesignBox.find("svg").first();
const imageType = "image/svg+xml";
const blob = new Blob([svgElem[0]], { type: imageType });
const url = URL.createObjectURL(blob);
const svgIframe = document.createElement("iframe");
svgIframe.src = url;

ColorClassProxyBox.append(svgIframe);

Answer 1

是的，数据URL文档为considered different origin。您可以使用Blob URL来实现相同目的，而不受此限制。

const blob = new Blob([markup], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);

阻止访问使用数据URI呈现的SVG文档：访问跨域框架错误

1 个答案: