Получить 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 to index.html, теперь мне нужно способ доступа к элементам в iframe для настройки некоторых их свойств.

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

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

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

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

TypeError: не удается вызвать метод "содержимое" null

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

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

37
iframe jquery

10 ответов

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

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

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

48

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

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

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

38
var iframe = document.getElementById('iframe');
  $(iframe).contents().find("html").html();
6
$(editFrame).contents().find("html").html();
4

Если у вас 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();

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

2

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

просто для справки. Вот как это сделать с jQuery (полезно, например, когда вы не можете запроса по id элемента):

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

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

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

почему бы не попробовать 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>
0
$('#iframe').load(function() {
    var src = $('#iframe').contents().find("html").html();
    alert(src);
});
-2