使用 jQuery 在 iframe 中获取 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16103407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get HTML inside iframe using jQuery
提问by Ajit S
Here is my situation.
这是我的情况。
I have a file called iframe.html, which contains the code to for a image slideshow.
The code is somewhat like
我有一个名为 的文件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>
Users can use the embed code to add the slideshow to their blogs or websites (can be from different domains). Let's say a user has to embed the slideshow in index.html, they can add by adding following lines:
用户可以使用嵌入代码将幻灯片添加到他们的博客或网站（可以来自不同的域）。假设用户必须在 中嵌入幻灯片index.html，他们可以通过添加以下行来添加：
<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>
This will bring the complete HTML code from iframe.htmlto index.html, now I need a way to access the elements in the iframe to adjust some of their properties.
这会将完整的 HTML 代码从iframe.html到index.html，现在我需要一种方法来访问 iframe 中的元素以调整它们的某些属性。
Like in the code the width and the height of the iframe are set by the user to some fix dimensions. I would like to adjust the size of the slideshow (and images contained) to the size of the iframe container. What is the best way to do this?
就像在代码中一样，iframe 的宽度和高度由用户设置为一些固定尺寸。我想将幻灯片的大小（和包含的图像）调整为 iframe 容器的大小。做这个的最好方式是什么？
I tried with no success to access the iframe components from index.htmlby something like
我尝试index.html通过类似的方式访问 iframe 组件，但没有成功
$('#iframe').contents();
but get the error:
但得到错误：
TypeError: Cannot call method 'contents' of null
类型错误：无法调用 null 的方法“内容”
So, I think to implement the logic in iframe.htmlwhere the slideshow should check the width and height of parent and set its height accordingly.
所以，我认为iframe.html在幻灯片应该检查父级的宽度和高度并相应地设置其高度的位置实现逻辑。
I am pretty much confused, hope my question makes sense to most. Please feel free to ask further explanation. Your help is appreciated.
我很困惑，希望我的问题对大多数人有意义。请随时提出进一步的解释。感谢您的帮助。
回答by Kna?is
This line will retrieve the whole HTML code of the frame. By using other methods instead of innerHTMLyou can traverse DOM of the inner document.
此行将检索框架的整个 HTML 代码。通过使用其他方法代替innerHTML您可以遍历内部文档的 DOM。
document.getElementById('iframe').contentWindow.document.body.innerHTML
Thing to remember is that this will work only if the frame source is on the same domain. If it is from a different domain, cross-site-scripting (XSS) protection will kick in.
要记住的是，这仅在帧源位于同一域中时才有效。如果它来自不同的域，跨站点脚本 (XSS) 保护将启动。
回答by Chamara Keragala
Try this code:
试试这个代码：
$('#iframe').contents().find("html").html();
$('#iframe').contents().find("html").html();
This will return all the html in your iframe. Instead of .find("html")you can use any selector you want eg: .find('body'),.find('div#mydiv').
这将返回 iframe 中的所有 html。而不是.find("html")您可以使用任何您想要的选择器，例如：.find('body'), .find('div#mydiv')。
回答by Dolo
var iframe = document.getElementById('iframe');
$(iframe).contents().find("html").html();
回答by Arun Yokesh
$(editFrame).contents().find("html").html();
回答by Hermes
this works for me because it works fine in ie8.
这对我有用，因为它在 ie8 中工作正常。
$('#iframe').contents().find("html").html();
but if you like to use javascript aside for jquery you may use like this
但是如果你喜欢在 jquery 之外使用 javascript，你可以这样使用
var iframe = document.getElementById('iframecontent');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var val_1 = innerDoc.getElementById('value_1').value;
回答by Md. Nazrul Islam
If you have Divas follows in one Iframe
如果您在一个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>
Then you can find the text of those Divusing the following code
然后你可以使用以下代码找到那些Div的文本
var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
var divInnerFormText = iContentBody.find("#divInnerForm").text();
I hope this will help someone.
我希望这会帮助某人。
回答by mxro
Just for reference's sake. This is how to do it with JQuery (useful for instance when you cannot query by element id):
仅供参考。这是使用 JQuery 的方法（例如当您无法按元素 id 查询时很有用）：
$('#iframe').get(0).contentWindow.document.body.innerHTML
回答by toshi
This can be another solution if jquery is loaded in iframe.html.
如果在 iframe.html 中加载 jquery，这可能是另一种解决方案。
$('#iframe')[0].contentWindow.$("html").html()
回答by KingRider
Why not try Ajax, check a code part 1 or part 2 (use comment).
为什么不尝试 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>回答by akash
$('#iframe').load(function() {
var src = $('#iframe').contents().find("html").html();
alert(src);
});
