`

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>

 

 

分享到：
| padding-top四种浏览器的兼容
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics