无法通过 jQuery 访问 iFrame 的类的高度

Posted 2023-05-09

【中文标题】无法通过 jQuery 访问 iFrame 的类的高度

【英文标题】：Can't access class' height of iFrame via jQuery

【发布时间】：2021-08-14 01:07:57

【问题描述】：

我想通过 iFrame 在我的网站上添加 Instagram 帖子。由于帖子可以有不同的高度（来自不同的比率），我需要检查“嵌入”类的高度，即 Instagram 页面的正文标签中的高度。

所以我通过以下方式包含 iFrame：

<p class="embedded-iframe">
 <iframe class="instagram-embed" id="iframe-1" src="https://www.instagram.com/p/COvuizXoHPD/embed/captioned/" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" data-iframe-id="1">
 </iframe>
</p>

没有任何进一步的 CSS，iFrame 的宽度为 300 像素，高度为 150 像素。

现在在 iFrame 的 body-tag 中，有一个带有“Embed”类的 div，并且这个类具有我为 iFrame 设置样式所需的高度。 所以我试图得到这个类的高度，但它不起作用。这是我的代码：

$(document).ready(function () 

    $("iframe").load(function()

        console.log("iFrame loaded");

        var test = $("iframe").contents().find(".Embed").height();

        console.log(test);

    );

);

第一个日志条目被正确写入控制台，但 var test 的值是 null。 我也尝试过不同的课程，但每次都是同样的问题。

【问题讨论】：

您无法访问第 3 方 iframe 的内容

【参考方案1】：

尝试使用find("html").html() 获取内容

示例：

var htmlIframe=$('#iframe-1').contents().find("html").html();
htmlIframe.find(".Embed").height();

【讨论】：

这会在控制台中带来一个错误：Firefox 中的 Uncaught TypeError: htmlIFrame is undefined 和 Chrome 中的 Cannot read property 'find' of undefined