使用jQuery在iframe中获取HTML

这是我的情况。

我有一个名为iframe.html的文件，其中包含图像幻灯片的代码。该代码有点像

用户可以使用嵌入代码将幻灯片添加到他们的博客或网站(可以来自不同的域)。 假设用户必须在iframe.html中嵌入幻灯片，他们可以通过添加以下行来添加：

这会将完整的HTML代码从iframe.html带到index.html，现在我需要一种方法来访问iframe中的元素以调整其某些属性。

就像代码中一样，用户可以将iframe的宽度和高度设置为某些固定尺寸。 我想将幻灯片放映的大小(和包含的图像)调整为iframe容器的大小。 做这个的最好方式是什么？

我尝试以类似以下方式成功访问iframe.html的iframe组件没有成功

$('#iframe').contents();

但得到错误：

TypeError：无法调用方法“内容”为null

因此，我认为要实现iframe.html中的逻辑，其中幻灯片放映应检查父对象的宽度和高度，并相应地设置其高度。

我很困惑，希望我的问题对大多数人有意义。 请随时提出进一步的解释。 感谢您的帮助。

Ajit S asked 2020-07-30T02:11:37Z

10个解决方案

56 votes

此行将检索框架的整个HTML代码。 通过使用其他方法代替innerHTML，您可以遍历内部文档的DOM。

document.getElementById('iframe').contentWindow.document.body.innerHTML

要记住的是，只有当帧源在同一域中时，这才起作用。 如果来自其他域，则将启用跨站点脚本(XSS)保护。

Knaģis answered 2020-07-30T02:11:58Z

42 votes

试试这个代码：

.find("html")

这将返回iframe中的所有html。 可以使用任何所需的选择器来代替2988650206394319871987，例如：.find('body'),.find('div#mydiv')。

Chamara Keragala answered 2020-07-30T02:12:23Z

6 votes

var iframe = document.getElementById('iframe');

$(iframe).contents().find("html").html();

Dolo answered 2020-07-30T02:12:39Z

4 votes

$(editFrame).contents().find("html").html();

Arun Yokesh answered 2020-07-30T02:12:55Z

2 votes

如果您在一台iframe中具有以下Div，

Or

然后，您可以使用以下代码查找这些Div的文本

var iContentBody = $("#ifrmReportViewer").contents().find("body");

var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();

var divInnerFormText = iContentBody.find("#divInnerForm").text();

希望对您有所帮助。

Md. Nazrul Islam answered 2020-07-30T02:13:23Z

2 votes

这对我有用，因为它在ie8中可以正常工作。

$('#iframe').contents().find("html").html();

但是，如果您希望将javascript用作jquery，则可以这样使用

var iframe = document.getElementById('iframecontent');

var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

var val_1 = innerDoc.getElementById('value_1').value;

Hermes answered 2020-07-30T02:13:47Z

0 votes

仅供参考。 这是使用JQuery的方法(例如，当您无法按元素ID查询时很有用)：

$('#iframe').get(0).contentWindow.document.body.innerHTML

mxro answered 2020-07-30T02:14:07Z

0 votes

如果将jquery加载到iframe.html中，则这可能是另一种解决方案。

$('#iframe')[0].contentWindow.$("html").html()

toshi answered 2020-07-30T02:14:27Z

0 votes

为什么不尝试Ajax，检查代码的第1部分或第2部分(使用注释)。

KingRider answered 2020-07-30T02:14:47Z

-2 votes

$('#iframe').load(function() {

var src = $('#iframe').contents().find("html").html();

alert(src);

});

akash answered 2020-07-30T02:15:03Z