iframe跨域自适应高度
main.htm文件内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>跨域IFrame自动高度</title> <script language="javascript" src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> function autoHeightIFrameNavigate(iframeId,url) { var iframe = $('#' + iframeId); iframe.attr('_name_',iframe.attr('name')) //备份原来的 name .attr('src',url) //设置URL .one('load',function () { this.contentWindow.location = "about:blank"; //导向代理页面，我直接使用了这个 $(this).one('load',function () { var msg = this.contentWindow.name; //得到值 这个值就是高度了 this.contentWindow.name = $(this).attr('_name_'); //恢复原来的 Name this.contentWindow.location = url; //再次导向目标页面 try { var height = eval(msg); //得到并设置高度 // alert(height); iframe.css('height', height + 'px'); } catch(e) { alert('目标页面没有设置高度到 window.name') } }) }) } $(document).ready(function(){autoHeightIFrameNavigate('iframePreview','http://58.30.227.36:802/a2.html');},100); </script> </head> <body> <div> <iframe id="iframePreview" style="width: 100%;height:800px;" scrolling="no" frameborder="no"></iframe> </div> </body> </html> frame内容页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ window.name = document.body.scrollHeight; }); </script> </head> <body> <a href="a3.html"> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> 测试测试测试！<br/> </a> </body> </html>
本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。