iframe自适应网页

来源：互联网发布：板生产软件编辑：程序博客网时间：2024/05/07 23:24

frame.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>iframe自适应高度.htm</title>

</head> <body> 两个iframe也是没有影响的，只要把在另一个iframe的页面中把javascript再复制一遍就行! <div><iframe src="iframe_include.jsp" frameborder="1"></iframe></div>

</body> </html>

frame_include.jsp文件：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>iframe自适应网页</title>

//自动调整iframe框架的方法

function iframeAuto()

{

try

{

if(window!=parent)

{

//定位需要调整的frame框架（在父级窗口中查找）

var a = parent.document.getElementsByTagName("IFRAME");

for(var i=0; i<a.length; i++)

{

if(a[i].contentWindow==window)

{

var h1=0, h2=0;

a[i].parentNode.style.height = a[i].offsetHeight +"px";

a[i].style.height = "10px"; //首先设置高度为10px,后面会修改

if(document.documentElement&&document.documentElement.scrollHeight)

{

h1=document.documentElement.scrollHeight;

}

if(document.body) h2=document.body.scrollHeight;

var h=Math.max(h1, h2); //取两者中的较大值

if(document.all) {h += 4;}

if(window.opera) {h += 1;}

//调整框架的大小

a[i].style.height = a[i].parentNode.style.height = h +"px";

} } }

}

catch (ex){}

}

//事件绑定的方法，支持IE5以上版本

if(window.attachEvent)

{

window.attachEvent("onload", iframeAuto);

}

else if(window.addEventListener)

{

window.addEventListener('load', iframeAuto, false);

}

//-->

</script>

</head>

<body>

<tr>

<td> iframe 自适应其加载的网页 </td>

</tr>

</table>

</body>

</html>