iframe学习

最新推荐文章于 2022-06-29 12:56:32 发布

wangzhantao

最新推荐文章于 2022-06-29 12:56:32 发布

阅读量121

点赞数

分类专栏： javascript基础文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wangzhantao/article/details/84459765

版权

javascript基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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 " οnclick="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>

wangzhantao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe学习

1 iframe 主窗口操作子窗口2 iframe自适应高度的写法 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://ww...
复制链接

扫一扫

专栏目录