使用jQuery在iframe中獲取HTML

這是我的情況。

我有一個名為iframe.html的文件，其中包含圖像幻燈片的代碼。該代碼有點像

用戶可以使用嵌入代碼將幻燈片添加到他們的博客或網站(可以來自不同的域)。 假設用戶必須在iframe.html中嵌入幻燈片，他們可以通過添加以下行來添加：

這會將完整的HTML代碼從iframe.html帶到index.html，現在我需要一種方法來訪問iframe中的元素以調整其某些屬性。

跨域獲取iframe的html、就像代碼中一樣，用戶可以將iframe的寬度和高度設置為某些固定尺寸。 我想將幻燈片放映的大小(和包含的圖像)調整為iframe容器的大小。 做這個的最好方式是什么？

我嘗試以類似以下方式成功訪問iframe.html的iframe組件沒有成功

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

但得到錯誤：

TypeError：無法調用方法“內容”為null

因此，我認為要實現iframe.html中的邏輯，其中幻燈片放映應檢查父對象的寬度和高度，并相應地設置其高度。

iframe框架使用、我很困惑，希望我的問題對大多數人有意義。 請隨時提出進一步的解釋。 感謝您的幫助。

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

10個解決方案

56 votes

此行將檢索框架的整個HTML代碼。 通過使用其他方法代替innerHTML，您可以遍歷內部文檔的DOM。

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

iframe是個啥？要記住的是，只有當幀源在同一域中時，這才起作用。 如果來自其他域，則將啟用跨站點腳本(XSS)保護。

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

42 votes

試試這個代碼：

.find("html")

這將返回iframe中的所有html。 可以使用任何所需的選擇器來代替2988650206394319871987，例如：.find('body'),.find('div#mydiv')。

html、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

html5 iframe替代方案。$(editFrame).contents().find("html").html();

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

2 votes

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

jquery html方法，然后，您可以使用以下代碼查找這些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

jquery iframe？2 votes

這對我有用，因為它在ie8中可以正常工作。

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

但是，如果您希望將javascript用作jquery，則可以這樣使用

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

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

html5 iframe、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

htmliframe。0 votes

如果將jquery加載到iframe.html中，則這可能是另一種解決方案。

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

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

0 votes

為什么不嘗試Ajax，檢查代碼的第1部分或第2部分(使用注釋)。

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

-2 votes

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

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

alert(src);

});

jquery獲取iframe子頁面元素、akash answered 2020-07-30T02:15:03Z