javascript - jQuery + SVG : unable to access SVG element in iFrame

Question

像this这样的问题和 this假设使用 jQuery contents() 可以让您访问 iFrame 元素。

但是，此代码不起作用。

这不是跨源问题，因为父级和 iFrame 都托管在 Codepen.io 域上。

如果您查看 Codepen，您可以看到 iFrame 有一个名为 designBox 的子 SVG 元素。

$(document).ready(function() {

          $("#livePreview").on("load", function() {
             var designBox = $("#livePreview").contents().find("#designBox");
             var livePreviewContents = $("#livePreview").contents();

             console.log("Loaded live preview. Design box: " + designBox.length + ". Live preview contents: " + livePreviewContents);
          });

    });

Answer 1

您可能面临同源政策问题。您无法使用 JavaScript 访问具有不同来源的 iframe 的内容，如果您可以这样做，这将是一个巨大的安全漏洞。对于同源策略，浏览器会阻止尝试访问不同源框架的脚本。

我正在分享一个链接，其中详细解释了如何访问 iframe 的内容和各种场景 Follow this link