本文链接:https://blog.csdn.net/weixin_44540236/article/details/92760494

两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的,改变的是中间的内容。

有没有什么方法可以不改变外面的基本框架只改变中间的内容???

我们可以用页面嵌套方法来达到这一要求。页面嵌套的方法有很多种,在这我用的是标签来达到页面嵌套的效果。

定义: 标签规定一个内联框架,在当前html中嵌入另一个文档;

一些常用属性

参数 解析
align 根据周围的文字排列 iframe。
frameBorder 是否显示框架周围的边框。
noResize 框架是否可调整大小
scrolling 框架是否有滚动条。
src 被嵌入html中文档的URL。

实列:

将开始截的图片嵌入内容改成百度首页

可以看出百度首页已经被嵌入我们这个页面了,但是嵌入后页面出现了滚动条,嵌入页面的滚动条影响了用户体验和页面美观所以我们得去除掉这个滚动条。其实就是设置iframe的高度,等于内嵌网页的高度,这样就看不出来滚动条和嵌套痕迹。
自动调节iframe高度Js代码

//根据浏览器大小调整iframe高度
reSetSize();
window.onresize = reSetSize;
function reSetSize() {
var windowsHeight = window.innerHeight;
document.getElementById("content").style.height = (windowsHeight-框架顶部高度) + "px";
}

解析:
将你嵌入页面的高度设置成屏幕可视高度减去原框架顶部和底部高度(宽度设置同理)。

iframe标签(页面嵌套)的更多相关文章

  1. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  2. iframe标签的子父页面调用函数和属性

    在使用iframe标签时,总想通过子页面调用父页面的一些方法和属性.今天终于发现了. 1在父页面写一个函数 //让子页面来调用此方法,控制导航栏 function childfunc(){ alert ...

  3. 页面嵌套 Iframe 产生缓存导致页面数据不刷新问题

    最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息. 初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳.这样能 ...

  4. iframe标签flash遮盖页面元素问题——wmode参数

    最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...

  5. iframe标签里面的页面元素只读

    iframe标签里面的页面元素只读,可以通过设置一个只读的透明div进行遮罩实现. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  6. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  7. 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应

    总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...

  8. django 重定向如何解决iframe页面嵌套问题

    出现问题背景:从登录页进入到首页后,如出现后台重启或者用户清除cookie,或者session过期,token验证等问题,会重定向到登录页.由于使用的是iframe,出现登录页面嵌套在首页框架下.很是 ...

  9. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

随机推荐

  1. CentOS / RHEL 配置yum源

    CentOS / RHEL 配置yum源 */--> CentOS / RHEL 配置yum源 Table of Contents 1. 前言 2. 关于yum 2.1. yum是什么 2.2. ...

  2. mybaits及mybaits generator 插件使用指南(亲测原创)

    一. eclips安装mybaits插件 参考文章:http://www.cnblogs.com/zengsong-restService/archive/2013/08/09/3248245.htm ...

  3. Swagger 介绍

    简介Swagger 是最流行的 API 开发工具,它遵循 OpenAPI Specification(OpenAPI 规范,也简称 OAS).Swagger 可以贯穿于整个 API 生态,如 API ...

  4. Servlet获取POST方法请求体数据

    if ("POST".equalsIgnoreCase(request.getMethod())) { test = request.getReader().lines().col ...

  5. 1. hadoop使用启动命令时报错之分析解决

    今天在学习hadoop启动命令的时候,先jps看了下,发现namenode.datanode都开着,所以想要先停止这些服务,结果输入命令后报错:“WARN util.NativeCodeLoader: ...

  6. php代码判断用户访问的当前协议是否为https

    public function isHttps() { if ( ! empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) ...

  7. rocketMQ配置事故

    公司的binlog消息通知,基于canal采集然后转发到rocketmq推送给业务进行消费. 基于此机制,为了实现实时计算通用源端处理,订阅了若干rocketmq的topic进行数据的幂等事务性投递到 ...

  8. RocketMQ之八:重试队列,死信队列,消息轨迹

    问题思考 死信队列的应用场景? 死信队列中的数据是如何产生的? 如何查看死信队列中的数据? 死信队列的读写权限? 死信队列如何消费? 重试队列和死信队列的配置 消息轨迹 1.应用场景 一般应用在当正常 ...

  9. Spring RestTemplate详解(转载)

    转载来源:https://www.cnblogs.com/zhaoyan001/p/8442602.html 1.什么是REST? REST(RepresentationalState Transfe ...

  10. 【计算机视觉】基于样本一致性的背景减除运动目标检测算法(SACON)

    SACON(SAmple CONsensus)算法是基于样本一致性的运动目标检测算法.该算法通过对每个像素进行样本一致性判断来判定像素是否为背景. 算法框架图 由上图可知,该算法主要分为四个主要部分, ...