我们在日常浏览网页时经常看到各式各样的网页,会发现一般的网页,它会拥有一个导航栏,

在导航栏中我们可以进行多方面的选择或进行搜索,可以实现多页面的跳转,

但是在进行页面跳转之后,导航栏还是存在,或者隐藏到一边,

因为它们有一个主页面或属于同一个软件的网页,是不是这样呢,相信你很清楚。

在程序员的眼中,实现这样跳转的方法有很多种。

如果两个网页互不存在关系,但是他们发布的平台相同的,可以存在跳转,

或者两个页面互不干预,只存在一个链接的按钮,

那么可以用a标签或者,或者写js打开一个全新的页面就可以了。

grafana iframe嵌套_导航栏

grafana iframe嵌套_iframe元素现实页面嵌套_02

那如果我需要的也是页面跳转,但是我也需要存在导航栏为我提供准确的页面导航跳转。

使用iframe标签进行页面嵌套

grafana iframe嵌套_导航栏_03


iframe元素也是属于HTML标签,它同样拥有Html标签的属性,您可以设置其样式。

如:设置宽度,高度,边框大小、颜色,背景等等样式

当然,您也可以把要嵌套的页面链接直接放到iframe元素中。

grafana iframe嵌套_grafana iframe嵌套_04


但是这一个iframe元素只能嵌套一个页面,如需要多个嵌套,需要多个iframe元素,不建议。

您也可以用一个iframe元素,通过写JS代码实现多个页面嵌套,JS可以多个点击事件实现嵌套跳转,也可以全用同一个方法实现搜哟页面嵌套跳转,但是用一个方法实现所有嵌套跳转我还不会,

所以我写的是onclick点击事件。

下面展示部分页面嵌套的代码(不是全部)。

//10,销售订单历史
        $("#Salesorder").click(function () {
            $("#content").attr("src", "/Huitubegoods/Salesinformation/Salesorder");
        });
        //11,新增销售订单
        $("#IntersSalesorder").click(function () {
            $("#content").attr("src", "/Huitubegoods/Salesinformation/IntersSalesorder");
        });

attr表示嵌套的内容,attr里面的值用属性值表示,src 表示嵌套的路径,后面是具体的页面路径。

我所练习项目的主页面:

grafana iframe嵌套_页面跳转_05

下面找到慧管货下面的新增销售订单,点击跳转到新增销售订单页面,但是,我的主体还没变,

导航栏还存在,只是嵌套区域进行了页面跳转。

grafana iframe嵌套_嵌套_06

页面嵌套跳转就是这样,相信您一定会。我们后续加油。