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& ...
随机推荐
- ValueAnimator
import android.animation.ValueAnimator; import android.os.Bundle; import android.support.v7.app.AppC ...
- ScreenShot 截图工具类
import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Rect; import an ...
- consul ocelot
consul配置完成后 新建.netcoreapi项目, nuget安装ocelot 添加多个配置文件,.netcore中会自动合并为一个文件,global配置总的配置,其他为各个项目的配置 Serv ...
- 使用div 的 contenteditable属性,实现输入编辑,输入 "#" 出现下拉选择
文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下: 具体代码可以看 https://github.com/YalongYan/e ...
- Hibernate三种状态:瞬时状态、持久化状态、离线状态
三种状态及相互转化 瞬时状态(transient):刚new出来一个对象,还没有被保存到数据库中 持久化状态(persistent):已经被保存到数据库中或刚从数据库中取得 离线状态(detached ...
- Python 常用模块(2) 序列化(pickle,shelve,json,configpaser)
主要内容: 一. 序列化概述 二. pickle模块 三. shelve模块 四. json模块(重点!) 五. configpaser模块 一. 序列化概述1. 序列化: 将字典,列表等内容转换成一 ...
- LeetCode.1200-最小绝对值差(Minimum Absolute Difference)
这是小川的第次更新,第篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第268题(顺位题号是1200).给定一个由不同的整数组成的数组arr,找到所有对元素,其中任意两个元素的绝 ...
- android#定制ListView的界面
内容摘自<第一行代码>——郭霖 只能显示一段文本的ListView实在是太单调了,我们现在就来对ListView的界面进行定制,让它可以显示更加丰富的内容.首先需要准备好一组图片,分别对应 ...
- USACO 1.1 Greedy Gift Givers
模拟. 如果用$map$的话,会很好写. 如果你不会$map$的话,在此小广告:https://blog.csdn.net/CQBZLYTina/article/details/80063739 /* ...
- Kafka性能调优分析-线上环境篇
一.背景介绍: 在平时的开发中,使用kafka来发送数据已经非常熟悉,但是在使用的过程中,其实并没有比较深入的探索kafka使用过程中 一些参数配置,带来的损失可能就是没有充分的发挥出kfka的优势, ...