Получить HTML внутри iframe с помощью jQuery

Вот моя ситуация.

У меня есть файл с именем iframe.html, который содержит код для слайд-шоу изображений. Код несколько похож на

<html>
  <head>
    <!-- Have added title and js files (jquery, slideshow.js) etc. -->
  </head>

  <body>
    <!-- Contains the images which are rendered as slidehow. -->
    <!-- have hierarchy like 'div' inside 'div' etc. -->
  </body>
</html>

Пользователи могут использовать код вставки для добавления слайд-шоу в свои блоги или веб-сайты (могут быть из разных доменов). Скажем, пользователь должен встроить слайд-шоу в index.html, добавить их, добавив следующие строки:

<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>

Это приведет к полному HTML-коду от iframe.html до index.html, теперь мне нужен способ доступа к элементам в iframe, чтобы настроить некоторые из их свойств.

Как и в коде, ширина и высота iframe задаются пользователем некоторыми фиксированными размерами. Я хотел бы настроить размер слайд-шоу (и изображений) в размере контейнера iframe. Каков наилучший способ сделать это?

Я попытался с успехом получить доступ к компонентам iframe из index.html чем-то вроде

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

но получите ошибку:

TypeError: Невозможно вызвать метод 'contents' из null

Итак, я думаю, чтобы реализовать логику в iframe.html, где слайд-шоу должно проверять ширину и высоту родителя и соответственно устанавливать его высоту.

Я в значительной степени смущен, надеюсь, что мой вопрос имеет смысл для большинства. Пожалуйста, не стесняйтесь спрашивать дополнительные объяснения. Ваша помощь приветствуется.

Ответы

Ответ 1

Эта строка будет извлекать весь HTML-код кадра. Используя другие методы вместо innerHTML, вы можете пересечь DOM внутреннего документа.

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

Помните, что это будет работать только в том случае, если источник кадра находится в одном домене. Если это из-за другого домена, будет задействована защита межсайтового скриптинга (XSS).

Ответ 2

Попробуйте этот код:

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

Это вернет все html в вашем iframe. Вместо .find("html") вы можете использовать любой селектор, который вы хотите, например: .find('body'), .find('div#mydiv').

Ответ 3

var iframe = document.getElementById('iframe');
  $(iframe).contents().find("html").html();

Ответ 4

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

Ответ 5

Если у вас Div, как указано в одном Iframe

 <iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"

     <div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or

     <form id="form1" runat="server">        
       <div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">          

            Some Text

        </div>
     </form>
 </iframe>

Затем вы можете найти текст этих Div, используя следующий код

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

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

Надеюсь, это поможет кому-то.

Ответ 6

это работает для меня, потому что он отлично работает в 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;

Ответ 7

Просто для справки. Вот как это сделать с помощью JQuery (полезно, например, когда вы не можете запросить идентификатор элемента):

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

Ответ 8

Это может быть другое решение, если jquery загружается в iframe.html.

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

Ответ 9

Почему бы не попробовать Ajax, проверьте часть кода 1 или часть 2 (используйте комментарий).

$(document).ready(function(){ 
	console.clear();
/*
    // PART 1 ERROR
    // Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null".  Both frames are sandboxed and lack the "allow-same-origin" flag.
	console.log("PART 1:: ");
	console.log($('iframe#sandro').contents().find("html").html());
*/
	// PART 2
	$.ajax({
		url: $("iframe#sandro").attr("src"),
		type: 'GET',
		dataType: 'html'
	}).done(function(html) {
		console.log("PART 2:: ");
		console.log(html);
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<body>
<iframe id="sandro" src="https://jsfiddle.net/robots.txt"></iframe>
</body>
</html>

Ответ 10

$('#iframe').load(function() {
    var src = $('#iframe').contents().find("html").html();
    alert(src);
});