iframe学习

最新推荐文章于 2024-10-17 17:44:13 发布

原创最新推荐文章于 2024-10-17 17:44:13 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

javascript基础专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在HTML中操作iframe主窗口，并实现iframe高度自适应调整。

1 iframe 主窗口操作子窗口

2 iframe自适应高度的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<iframe id="FF" src="b.html"></iframe>
<input type="submit" value=" OK " onclick="OK()"/>
<script language="JavaScript">
	function OK()
	{
	    // 操作iframe中内容的CSS
	    var iframe = document.getElementById('FF');
	
	    //iframe.contentWindow  这是取出iframe里面的window 
	    var body = getIframeWindow(iframe).document.body;
	 
	    body.style.marginTop = 50;
	    body.style.padding = 0;
	    body.style.fontSize = 30;
	    body.style.textAlign = 'center';
	    body.style.backgroundColor = 'red';
	    body.style.color = 'blue';
	  
	}

	//操作iframe之前必须获取iframe中的window
	function getIframeWindow(iframeElement){
		//IE   w3c
		return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
	}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
 33
   <div style="height: 500px;width: 100%">ddddddddddddddddddd<br /><br /><br /><br /><br /><br /><br><br><br><br><br>d</div>
  222222222
</body>
<script type="text/javascript">

	
	//更改iframe的高度为这个页面的高度
	var MainFrame = parent.document.getElementById("FF");
	alert( MainFrame.getAttribute('id') );
	//document.documentElement 是html节点
	MainFrame.style.height = getMaxOffsetHeight()+"px";//最好在这上面还加上一个常数，如10
    alert( MainFrame.style.height );
	
    alert( getMaxOffsetHeight());

    // 注意取出最大值 得到最大高度
    function getMaxOffsetHeight(){
    	return Math.max(document.documentElement.offsetHeight , document.body.offsetHeight );
    }
</script>
</html>