iframe标签（页面嵌套）

开发工具与关键技术：VS    <iframe>
作者:听民谣的老猫
撰写时间：2019/6/10   18:15

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

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

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

定义：标签规定一个内联框架，在当前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标签（页面嵌套）相关推荐

iframe 标签(用于嵌套网页)及loading加载动画效果
一. 什么是 iframe 1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页. 2. iframe 默认有一个宽高,存在边界. 3. iframe 是一个行内块级元素,可以通过 di ...
用iframe完成页面嵌套
用iframe完成页面嵌套作者:吱韩菌开发工具:Visual Studio 2015 撰写时间:2019-5-31 今天要给大家展示的是如何运用iframe标签完成页面嵌套.下面我们要做的是用if ...
Django iframe重定向页面嵌套问题
当我们使用django开发网站时,有时会使用到iframe技术,iframe直接在页面之上展示内容,十分方便,但是当我们需要在iframe页面中进行重定向(redirect)到一个url时会出现嵌套页 ...
详解a标签与iframe标签
先来说一下iframe标签. iframe标签内联框架元素 ,有效地将另一个HTML页面嵌入到当前页面中.例如加入以下代码 <iframe src="http://www.baidu. ...
自学Web开发第十二天-基于VB和ASP.NET；页面嵌套、母版、网站导航
自学Web开发第十二天-基于VB和ASP.NET:页面嵌套.母版.网站导航页面嵌套母版页母版页的建立和使用访问母版页上的元素网站导航站点地图 SiteMapDataSource控件地图信 ...
iframe标签中写html,html页面中嵌套iframe标签，我们可以用html中的iframe标签搞定
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
html5父子页面数据传递,使用iframe标签嵌套页面时如何进行父子页面通讯/传值...
父页面使用iframe标签引入子页面 (使用本地文件) 父页面 function myFunction(e) { console.log("我是父页面的方法") } 引入本地路径的 ...
iframe标签中写html代码,Iframe嵌套HTML网页的用法?
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...

iframe标签（页面嵌套）

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

iframe标签（页面嵌套）相关推荐

最新文章

热门文章