jquery - 使用 jQuery 在 iframe 中获取 HTML

Question

这是我的情况。

我有一个名为的文件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 容器的大小。做这个的最好方式是什么？

index.html我尝试通过类似的方式访问 iframe 组件但没有成功

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

但得到错误：

TypeError：无法调用 null 的方法“内容”

所以，我认为实现iframe.html幻灯片应该检查父级的宽度和高度并相应地设置其高度的逻辑。

我很困惑，希望我的问题对大多数人来说都有意义。请随时询问进一步的解释。感谢您的帮助。

score 60 · Accepted Answer

此行将检索框架的整个 HTML 代码。通过使用其他方法而不是innerHTML您可以遍历内部文档的 DOM。

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

要记住的是，这仅在帧源位于同一域时才有效。如果它来自不同的域，跨站点脚本 (XSS) 保护将启动。

score 46 · Accepted Answer

试试这个代码：

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

这将返回 iframe 中的所有 html。而不是.find("html")你可以使用任何你想要的选择器，例如：.find('body'), .find('div#mydiv').

score 6 · Accepted Answer

6

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

于 2013-04-19T11:22:17.957 回答

score 4 · Accepted Answer

4

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

于 2014-12-06T06:04:57.387 回答

score 3 · Accepted Answer

这对我有用，因为它在 ie8 中运行良好。

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

但是如果你喜欢在 jquery 之外使用 javascript，你可以像这样使用

var iframe = document.getElementById('iframecontent');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var val_1 = innerDoc.getElementById('value_1').value;

score 2 · Accepted Answer

如果您在一个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>

然后您可以使用以下代码找到那些Div的文本

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

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

我希望这会对某人有所帮助。

score 1 · Accepted Answer

仅供参考。这是使用 JQuery 执行此操作的方法（例如，当您无法按元素 id 查询时很有用）：

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

score 0 · Accepted Answer

如果在 iframe.html 中加载 jquery，这可能是另一种解决方案。

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

score 0 · Accepted Answer

为什么不试试 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>

score -2 · Accepted Answer

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

jquery - 使用 jQuery 在 iframe 中获取 HTML

10 回答 10

Related

Reference