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

Answer 2

如果看一下开发人员工具，您会注意到Codepen添加了一个ID为result的中间iFrame。这是因为您添加的iframe是一个codepen页面，该页面也已经包含一个iframe。

结构类似于：

|--- iframe#livePreview -------|
| |--- iframe#result --------| |
| | |--- svg#designBox ----| | |
| | |                      | | |
| | |______________________| | |
| |__________________________| |
|______________________________|

因此，您需要添加另一个contents()调用才能进入此iframe#result，然后获取您的svg。

=> $("#livePreview").contents().find("#result").contents().find("#designBox"); 但是您可能必须管理嵌套iframe的load事件（我尚未对其进行测试）

jQuery + SVG：无法在iFrame中访问SVG元素

2 个答案: