iframe标签(页面嵌套)
本文链接: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标签(页面嵌套)的更多相关文章
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- iframe标签的子父页面调用函数和属性
在使用iframe标签时,总想通过子页面调用父页面的一些方法和属性.今天终于发现了. 1在父页面写一个函数 //让子页面来调用此方法,控制导航栏 function childfunc(){ alert ...
- 页面嵌套 Iframe 产生缓存导致页面数据不刷新问题
最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息. 初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳.这样能 ...
- iframe标签flash遮盖页面元素问题——wmode参数
最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...
- iframe标签里面的页面元素只读
iframe标签里面的页面元素只读,可以通过设置一个只读的透明div进行遮罩实现. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- vue 给嵌套的iframe子页面传数据 postMessage
Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...
- 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...
- django 重定向如何解决iframe页面嵌套问题
出现问题背景:从登录页进入到首页后,如出现后台重启或者用户清除cookie,或者session过期,token验证等问题,会重定向到登录页.由于使用的是iframe,出现登录页面嵌套在首页框架下.很是 ...
- iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)
最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...
随机推荐
- 在spring的业务层获取request,response
1.直接通过controller层获取到传输到业务层2.SpringMVC提供的RequestContextHolder可以直接获取代码: RequestAttributes requestAttri ...
- sql server 本机编译存储过程(内存优化表) 绕过不支持FULL OUTER JOIN 的限制的方法
将FULL OUTER JOIN 转成left join,right join 和 union select * from A ID NAME4 Spaghetti1 Pirate2 Monkey3 ...
- vue定义global.js,挂载在vue原型上面使用
首先在src目录下创建global目录,在global目录下创建index.js. export default { install(Vue) { var that = this // 1. 添加全局 ...
- docker MySQL官方版本使用记录
docker MySQL官方版本使用记录 使用记录 拉取官方镜像:docker pull mysql 运行镜像:docker run --name mysql -p 3306:3306 -e MYSQ ...
- Django:(02)项目配置
上一篇我们创建了一个Django项目,并且让它运行了起来了. 当是,我们还没有使用到我们创建的应用,以及templates模版目录. 需求: 在此之前我们根据需要对我们的项目进行配置修改. 在项目开发 ...
- 云计算openstack核心组件--glance-镜像服务(6)
glance做什么 OpenStack 由 Glance 提供 Image 服务 获取镜像位置 https://docs.openstack.org/image-guide/obtain-images ...
- LCA -cogs2098 [SYOI 2015] Asm.Def的病毒
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vQXmxVaPU [题目描述] “这就是我们最新研制的,世界上第一种可持久化动态计算机病 ...
- VS开发】如何给console控制台程序更换应用程序图标
[VS开发]如何给console控制台程序更换应用程序图标 标签:[VS开发] 实际上非常简单,就是增加一个图标资源,在资源视图里,然后修改其ID为IDC_MAINFRAME,然后编译生成即可! 20 ...
- Apache——开启个人用户主页功能
个人主页功能分为不加密和加密两种 不加密: 先来建立几个用户,我这是建了两个 例:命令为:useradd qiyuan 然后输入:passwd qiyuan,改一下密码 我们看一下家目录下面: 已经 ...
- rowkey散列和预分区设计解决hbase热点问题(数据倾斜)
Hbase的表会被划分为1....n个Region,被托管在RegionServer中.Region二个重要的属性:Startkey与EndKey表示这个Region维护的rowkey的范围,当我们要 ...