HTML中iframe标签的使用

iframe标签能解决在一个页面张添加不同的HTML文件，选择不同的地址可以进入不同的页面中去，在同一个页面中修改其中某一块的内容来达到菜单切换的效果，这篇文章分享iframe标签的创建/使用以及iframe标签的高度自适应。

1. 在HTML页面中要显示iframe框架的地方添加一个iframe标签。

	<iframe name="iframename" src="../hong1.html"
		id="myiframe" frameborder="0" scrolling="no"
		style="width: 100%; border: 0px; overflow: hidden;"
		 onload="this.height=this.contentWindow.document.documentElement.scrollHeight">
		 </iframe>

name：内嵌帧的名称
width：内嵌帧的宽度（可用像素值和百分比）
height：内嵌帧的高度（可用像素值和百分比）
frameborder：内嵌帧的边框，一般设置为0
scrolling：是否出现滚动条（auto为自动，yes为显示，no为不显示）
src：内嵌入文件的地址
2. 高度自适应设置：添加一个JavaScript的函数SetWinHeight，具体代码如下图所示。在iframe框架加载的时候调用SetWinHeight这个函数。οnlοad=“SetWinHeight(this)”

<script type="text/javascript">
			    var myiframe = document.getElementById('myiframe');
			    myiframe.addEventListener('load', function() {
			      myiframe.height = getHeight(myiframe.contentDocument);;
			    });
			
			    function getHeight(doc) {
			      var body = doc.body,
			          html = doc.documentElement;
			
			      var height = Math.max( body.scrollHeight, body.offsetHeight,
			        html.clientHeight, html.scrollHeight, html.offsetHeight );
			      return height;
			    }
			  </script>

3.不同地址在iframe框架中显示：用a标签调用，target属性指向上面创建的框架中。

<a class="bg1" href="../hong1.html" target="iframename">红色经典1</a>
		<a class="bg2" href="../hong2.html" target="iframename">红色经典2</a>

4.执行效果如下
点击红色经典1：

点击红色经典2：