使用jQuery在iframe中获取HTML
这是我的情况。
我有一个名为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>
用户可以使用embedded代码将幻灯片添加到他们的博客或网站（可以来自不同的域）。 假设用户必须在index.htmlembedded幻灯片，可以添加以下几行来添加幻灯片：
<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>
这将从iframe.html带来完整的HTML代码到index.html ，现在我需要一种方法来访问iframe中的元素来调整它们的一些属性。
就像在代码中一样，iframe的宽度和高度由用户设置为一些固定的尺寸。 我想调整幻灯片（和图像包含）的大小的iframe容器的大小。 什么是最好的方法来做到这一点？
我试图通过类似的东西从index.html访问iframe组件，没有成功
$('#iframe').contents();
但得到的错误：
TypeError：不能调用null的方法'contents'
所以，我认为要在iframe.html中实现幻灯片应检查父级的宽度和高度，并相应地设置其高度的逻辑。
我很困惑，希望我的问题对大多数人有意义。 请随时询问进一步的解释。 你的帮助表示赞赏。
这一行将检索框架的整个HTML代码。 通过使用其他方法而不是innerHTML您可以遍历内部文档的DOM。
document.getElementById('iframe').contentWindow.document.body.innerHTML
需要记住的是，只有当帧源位于同一个域时，这才会起作用。 如果来自不同的域，跨站点脚本（XSS）保护将会启动。
试试这个代码：
$('#iframe').contents().find("html").html();
这将返回您的iframe中的所有HTML。 而不是.find("html")你可以使用任何你想要的select器： .find('body') .find('div#mydiv') 。
var iframe = document.getElementById('iframe'); $(iframe).contents().find("html").html();
$(editFrame).contents().find("html").html();
如果你在一个Iframe中有如下的Div
<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>
然后你可以使用下面的代码find那些Div的文本
var iContentBody = $("#ifrmReportViewer").contents().find("body"); var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text(); var divInnerFormText = iContentBody.find("#divInnerForm").text();
我希望这会帮助别人。
这对我工作，因为它在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;
仅供参考。 这是如何使用JQuery（例如，当您无法通过元素ID进行查询时有用）：
$('#iframe').get(0).contentWindow.document.body.innerHTML
这可以是另一个解决scheme，如果jQuery的加载iframe.html。
$('#iframe')[0].contentWindow.$("html").html()
为什么不尝试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>
$('#iframe').load(function() { var src = $('#iframe').contents().find("html").html(); alert(src); });
