页面嵌套

页面嵌套
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio
撰写时间：6月27号
作者： 曾子千
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
在平常一般页面里，
有一个跳转功能，它通常是点击一个页面，跳到另一个页面，
它是通过一个<a href=”#”>来进行一个页面跳转，
从一个页面跳到一个完全不同的页面，
这个跳转功能一般应用于网页的跳转，
但是，除此之外，我们想在页面上添加一些导航，让页面跳转在一个页面的一个规定大小的范围内进行跳转切换，该怎么做呢？
下面我来介绍一个插件—bootstrap4，用到了里面的<iframe>标签来进行嵌套跳转！
先把它js插件引用到项目
<script src="~/Content/bootstrap.min.js"></script>
HTML代码样式如下：
<script>
function reSetSize() {
var windowsHeight =
window.innerHeight;
$("#content").height((windowsHeight
- 110) + "px");}
</script>
<div class="container-fluid
p-0">
注释：content 显示需要加载的页面
iframe
元素会创建包含另外一个文档的内联框架（即行内框架）
<iframe id="content"></iframe>
</div>
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这个是你即将跳转页面的链接
})
这样嵌套页面就完成啦！