我试图访问从主机页面生活在一个<iframe>页的文档对象。 换言之,我有在它具有一个<iframe>一个页面,我想使用jQuery该网页(父页)来访问的那<IFRAME>文档对象。
具体来说,我试图找到<IFRAME> d文档的高度,一旦其内容渲染(onload事件),这样我就可以再调整<IFRAME>从父页面匹配的<IFRAME>的高度内容完全。
如果是重要的,这<IFRAME>使用Javascript主机页面上创建的,并且是在同一个域中的父页面。 我已经使用了这种类型的代码:
$('iframe').contents().find('body').append('<p>content</p>');
填充<IFRAME>的内容,但我不知道获得<IFRAME>的文档对象确切的语法。
出于某种原因,我发现了很多办法来一个<iframe>(与大多数普通的JavaScript),而不是其他方式周围从内访问父的文档对象。
在此先感谢您的帮助!
你等待的iframe来加载呢?
不管怎样,下面的代码在FF3.5,三价铬,IE6,IE7,IE8。
托管演示: http://jsbin.com/amequ (通过可编辑http://jsbin.com/amequ/edit )
<iframe src="blank.htm" ></iframe>
<script>
var $iframe = $('iframe');
/***
In addition to waiting for the parent document to load
we must wait for the document inside the iframe to load as well.
***/
$iframe.load(function(){
var $iframeBody = $iframe.contents().find('body');
alert($iframeBody.height());
/***
IE6 does not like it when you try an insert an element
that is not made in the target context.
Make sure we create the element with the context of
the iframe's document.
***/
var $newDiv = $('<div/>', $iframeBody.get(0).ownerDocument);
$newDiv.css('height', 2000);
$iframeBody.empty().append($newDiv);
alert($iframeBody.height());
});
</script>
如果您的IFRAME标签没有src属性或JavaScript或jQuery的动态创建的,您可以使用此代码段是指iframe的文档和操作使用jQuery:
//in your html file
<iframe id="myframe"></iframe>
//your js
var doc = $ ( '#myframe' )[0].contentWindow.document ;
doc.open () ;
doc.write ( "<div id='init'></div>" ) ;
doc.close () ;
var $myFrameDocument = $ ( '#myframe' ).contents ().find ( '#init' ).parent () ;
现在你可以访问DOM,并添加一些HTML到iframe:
$myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );
$('iframe').contents().get(0)
要么
$('iframe').contents()[0]
将返回页面上的第一个iframe中的文档。 记住jQuery的对象是匹配DOM元件的阵列
有很多方法可以访问的iframe:
例如,我们有这样的HTML页面:
<iframe name="my_frame_name" id="my_frame_id">
和JS:
frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow // true
我不得不这样做是在最近的一个项目,我用这个:
<iframe src="http://domain.com" width="100%"
border="0" frameborder="0" id="newIframe"
onload="$(this).css({height:this.contentWindow ? this.contentWindow.document.body.scrollHeight + (20) : this.contentDocument.body.scrollHeight + (20)});"
style="border:none;overflow:hidden;">
</iframe>
虽然我有函数内联(有道理在我的项目,因为通过PHP中生成的iframe),如果您是通过附加的JavaScript它会是这样的iframe
$("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>');
$("#newIframe").load(function(){
var _this=$("this")[0];
$(this).css({
height:
_this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)});
});
//contentWindow.document.body is for IE
//contentDocument.body is for everything else