Iframe子页面嵌套的使用技巧

在HTML中有着这么个标签:《iframe src=“URL”></iframe》，我们把它称做内联框架标签。刚开始学搭页面时很少用的到，直到现在接触了项目开发后才明白这个标签的常见性以及它的重要性。当看到标签中的src属性的时候，你是否就会猜到它的作用了呢?内联框架，说白了就是子页面嵌套，依靠它我们可以在当前页面中再搭建出一层内部页面，在src处写上视图路径便可成功的进行页面嵌套，效果大概是这样的，如图：

因为此次是测试所以我给了一个错误的页面路径让大家看看效果，单单只是添加一个iframe标签的效果：一个又窄又小的页面，加上纵向滚动条，这便是iframe最初的模样。现在我们就要通过设置某些方法以及样式，来让这孩子变得漂亮些。第一步要做的便是让子页面尽量适应主页面的宽高，改变它现在“矮小”的身材，在

①根据浏览器的大小调整iframe的高度
reSetSize();//调用方法
window.onresize = reSetSize;
function reSetSize() {
1.获取window的innerHeight(内部)的高度
var windowsHeight = window.innerHeight;
2.通过ID获取需要显示的窗口的样式中的高度,
接着设置窗口的高度 = (window的内部高度 - 110) + px单位,
减去110的高,是为了避免出现两条滚动条的情况,只显示内部一条滚动条较合适
document.getElementById(“content”).style.height = (windowsHeight - 110) + “px”;
}
②根据浏览器的大小调整iframe的宽度
reWidSize();
window.onresize = reWidSize;
function reWidSize() {
var windowsWidth = window.innerWidth;
document.getElementById(“content”).style.width = (windowsWidth - 110) + “px”;
}

方法设置完成后，启动页面看看效果如何，如图：

现在的子页面与刚开始的它相比，宽高已和主页面的大小向适应，滚动条也去除了，第一步完成。因为当前的子页面的src路径是被设置好了的，每当我打开子页面时，它都只会跳到相同的页面。那么，如何灵活的变更子页面的视图路径呢?这便是我们第二步要完成的事。

子页面上方的首页处用了无序列表，列表内的每个li标签代表着一个选项，每个选项的页面自然也不一样，但子页面只有一个，虽然创建多个子页面也可以但却很麻烦。因此我们第二步要做的便是定义一个方法，给每个li标签设置点击事件，触发点击事件修改子页面的src路径达到切换不同页面的效果。首先要用到的便是JQuery中的prop方法：prop()可以获取在匹配的元素集中的第一个元素的属性值,可用的参数有(name | properties | key,value )。

$("#denglu").click(function () {
1.注意！要记得在填写位置之前加/,表示此处为路径的开始
$("#content").prop(“src”, “/”);
});

设置登录的点击事件，在事件内通过id匹配到子页面，接着通过JQuery中的prop方法获取并修改子页面的src路径，这样的话便可以使用户在点击登录选项时子页面会跳转到登录页面的效果，相对于其他选项亦是如此。注意！在使用prop方法前需要先在项目中引用JQuery 3.2.1版本，无引用或引用的插件版本太低都可能会导致方法无法在项目中使用。