快速了解iframe框架：

项目中遇到一些技术难点总结：

iframe嵌套框架：

你好！ 这是我第一次使用 iframe嵌套框架 。如果你想学习如何使用iframe嵌套框架, 可以仔细阅读这篇文章，了解一下iframe的基本用法。

iframe的概念和作用：

这是我对iframe概念和作用的认知和理解，除了官方给出的理解，我简单的总结了一下我对iframe的理解，希望我的理解能帮助到你：

1. iframe ，可在页面上链接其他页面；
2. 作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另一个文档的内敛狂降（即行内框架）；
3. 必加参数：sandbox=“allow-same-origin allow-top-navigation allow=farms allow-scripts”；如果想要和无边框的，清新自然的感觉，那么加上frameborder=“0”.
4. 步骤：
   1.在界面上定义一个iframe的框架
   
   2.iframe还可作为链接的目标；
   
   注：
   若想iframe界面能够自适应父界面并且可以调整大小resize,则宽度和高度必须使用百分比模式。
   iframe调用的界面，实际逻辑和父界面的逻辑没有明确的先后。

代码截图：

话不多说，请看代码。
1.这里是 在父界面上定义一个iframe的框架

2.把赋予变量的win加载在指定的cht容器上

3.嵌套在父页面里的子页面（导航栏点击加载）

附加点：

iframe遮罩层

由于iframe框架是在父界面里嵌套了一个子页面，所以我们会发现遮罩层其实很难把父页面全部遮罩住，他只能遮住嵌套在父页面里的子页面，而我们一搬要实现的效果是点击弹框，然后显示遮罩层，遮住整个页面底部。
例如这样的效果图：

• 解决方法：

• 1.同时给父界面和子界面定义两个遮罩层（div）,父界面遮罩层的层级要低于子界面的层级，再者调用父界面的遮罩层。

js代码：
// 遮罩层
	function globalShade(){
		//获取页面的高度和宽度
		
		if(window.parent.document.getElementById('mask'))
			{	
			
			window.parent.document.getElementById('mask').style.display="block";
							$(".div").show()
	}
	
	
	function deleteGlobalShade(){
		
		if(window.parent.document.getElementById('mask'))
			{	
				
			window.parent.document.getElementById('mask').style.display="none";
						$(".div").hide()
		}
	 
	};

mask为父界面的遮罩层，div为子页面的遮罩层。