2021-06-17

嵌套页面，顾名思义就是把一个写好的页面嵌到另一个页面里面去，让页面总体呈现出更好的效果。

方法一：这是一种比较固定的方法，只可以套用于图中的页面形式，不能很灵活的运用也容易造成新手的混乱，但这个方法也是具有一定的优势的，那就是需要写的JS部分代码很少。（哈哈哈😄）

其中的页面形式是：

• • 。
    JS部分代码：

其中最重要的关键就是需要在主视图区域添加 iframe元素会创建包含另外一个文档的内联框架（即行内框架），没有这句代码就没法实现嵌套的功能。
还用到prop()方法：获取在匹配的元素集中的第一个元素的属性值，用于设置src属性。
以上就是方法一的部分内容，下面我们来看一下方法二。
方法二：

方法二是一种比较万能的方法，适用于各种各样的页面布局，而需要做的行为呢也很简单，首先在需要被嵌套的标签上添加href="javascript:;"属性防止页面跳转，并且添加上一个id。
下面来看一下JS部分的内容：

创建一个方法，在方法里面获取到在A标签上添加的ID，并且为ID添加点击事件。
点击事件里面用到$(selector).select(function) 方法，建函数绑定到select里面，function即作为一个当发生select事件时被规定运行的函数。
图中获取到的id：myContent是标签iframe的,无论是在方法一还是方法二都需要在页面布局的末尾添加上iframe方法才可以实现功能,iframe元素会创建包含另外一个文档的内联框架（即行内框架）。其中style设置的则是在嵌套进去以后在当前页面显示的样式。

获取到iframe元素，用到attr方法设置属性src即是在规定文档里面设置的url路径，也就是被嵌套页面的路径。
完成以上的步骤即可实现方法二的效果。