页面嵌套

                                     页面嵌套

开发工具与关键技术：Visual Studio 

撰写时间：6月27号  

作者：  曾子千  

在平常一般页面里，

有一个跳转功能，它通常是点击一个页面，跳到另一个页面，

它是通过一个来进行一个页面跳转，

从一个页面跳到一个完全不同的页面，

这个跳转功能一般应用于网页的跳转，

但是，除此之外，我们想在页面上添加一些导航，让页面跳转在一个页面的一个规定大小的范围内进行跳转切换，该怎么做呢？

下面我来介绍一个插件—bootstrap4，用到了里面的标签来进行嵌套跳转！

先把它js插件引用到项目

HTML代码样式如下：

注释：content 显示需要加载的页面

iframe
元素会创建包含另外一个文档的内联框架（即行内框架）

Js代码链接如下：

reSetSize();//根据浏览器大小调整iframe高度

// 获取到的是变更后的页面宽度

window.onresize
= reSetSize;

function reSetSize() {

//innerheight 返回窗口的文档显示区的高度。

var windowsHeight =
window.innerHeight;

//设置iframe的高度

$("#content").height((windowsHeight

• 110. • “px”);

}

跳转链接：

// 个人中心-》我的订单

$("#wddd").click(function () {

//获取iframe设置src属性，跳转链接

$("#content").attr(“src”, “/Centre/Gerencentre/wddd”)

注：content，上面给那个跳转页面命名的ID

Src这个是你即将跳转页面的链接

})

这样嵌套页面就完成啦！