这里是我的情况。
我有一个名为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();
但得到的错误:
类型错误:无法调用空的方法“内容”
所以,我认为执行逻辑iframe.html
地方幻灯片应检查父的宽度和高度,并相应地设置其高度。
我非常困惑,希望我的问题是有道理的大多数。 请随时提出进一步的解释。 您的帮助表示赞赏。
这条线将检索框的整个HTML代码。 通过使用其它方法代替innerHTML
就可以穿过内部文档的DOM。
document.getElementById('iframe').contentWindow.document.body.innerHTML
要记住的是,如果框架的源代码是在同一个域中,这只会工作。 如果是从不同的域,跨站点脚本(XSS)保护将一命呜呼
试试这个代码:
$('#iframe').contents().find("html").html();
这将返回所有的HTML在你的iframe中。 取而代之的.find("html")
你可以使用你想例如,任何选择: .find('body')
.find('div#mydiv')
var iframe = document.getElementById('iframe');
$(iframe).contents().find("html").html();
$(editFrame).contents().find("html").html();
如果你有事业部作为一个I帧如下
<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();
我希望这会帮助别人。
这个工作对我来说,因为它在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
如果jQuery是在Iframe.html的加载这可能是另一种解决方案。
$('#iframe')[0].contentWindow.$("html").html()
为什么不试试阿贾克斯,检查代码第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);
});