如何同步iframe与嵌入内容的高度
最近频繁的做一些通过iframe在a页面嵌入b页面需求。总结下来,有以下问题需要解决
1.如何同步iframe与嵌入内容的高度
2.将b页面载入到a页面后,如何隐藏掉b页面上的元素,如左导航,顶部导航等等
-如何同步iframe与嵌入内容的高度
a)获取由iframe引入的页面高度
contentWindow返回的是嵌入到中页面的window对象。可以通过这个window对象获取到网页的高度。contentWindow支持所有主流浏览器。
contentDocument返回的是嵌入页面的document对象。
b)同步引入页面与iframe的高度
将获取到的高度赋值给iframe
<iframe src="http://jsbin.com/nobefis" id="currentFrame" width="100%" scrolling="no" frameborder="no"></iframe> <script>
function resizeFrameHeight(currentFrame){
if(currentFrame){
var iframeObj = currentFrame.contentWindow;//获取iframe引入网页的window对象,进而通过window对象获取引入内容的document对象
if(iframeObj.document.body){
currentFrame.height = iframeObj.document.body.scrollHeight;
}
}
} window.onload = function () {
resizeFrameHeight(document.getElementById("currentFrame"))
}
</script>
HTMLIFrameElement.contentWindow
如何同步iframe与嵌入内容的高度的更多相关文章
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...
- iframe 随内容自适应高度
兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- iframe内容自适应高度
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...
- IFrame 根据嵌入页面自动调节大小
很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用Ifram ...
- 【HTML5】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...
- Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容
Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容 well组件可以为内容增添一种切入效果. 具有响应式特性的嵌入内容可以根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例 ...
- 【HTML 元素】嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
1.嵌入另一张HTML文档 iframe 元素允许在现有的HTML文档中嵌入另一张文档.下面代码展示了iframe元素的用法: <!DOCTYPE html> <html lang= ...
- 使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参
[csharp] view plaincopyprint?using Microsoft.VisualBasic; using System; using System.Collections; us ...
随机推荐
- ssh服务常见问题及其解决办法
1 统一解决办法 执行sshd -t,这样就可以指出是哪里出问题了. 所有的服务都应该有这个测试选项,否则出错了都不知道在哪里出的问题. 2 root用户登录,密码是对的,但是报“Permission ...
- Hibernate连接数据库
包结构如下图所示(按图标进行对齐): 环境搭好后代码分为以下几步: /** * private static final Configuration CONFIGURATION; * private ...
- npm 是干什么的?
网上的 npm 教程主要都在讲怎么安装.配置和使用 npm,却不告诉新人「为什么要使用 npm」.今天我就来讲讲这个话题. 本文目标读者是「不太了解 npm 的新人」,大神您别看了,不然又说我啰嗦了 ...
- 3-1 vue生存指南 - todolist实现-数据渲染
由于Vue.js作者是中国人,会说汉语,所以国内生态会更好一点.Vue.js作者是尤雨溪,
- E20171108-hm
breadcrumb n. 面包屑:面包心; 2.面包的松软(或柔软)部分; n. 网页导航区(a -> b -> c)
- bzoj 3396: [Usaco2009 Jan]Total flow 水流【最大流】
最大流生动形象的板子,注意数组开大点 #include<iostream> #include<cstdio> #include<queue> #include< ...
- bzoj 1622: [Usaco2008 Open]Word Power 名字的能量【模拟】
模拟即可,注意包含可以是不连续的 方便起见读入的时候全转成小写 #include<iostream> #include<cstdio> using namespace std; ...
- npm更换为淘宝镜像源
1.通过config命令 1 2 npm config set registry http://registry.cnpmjs.org npm info underscore (如果上面配置正确这 ...
- SAP基本搜索帮助及增强出口
se11创建基本搜索帮助时,各个参数的含意 选择方法 指定命中列表的数据来源,可以是数据库表,视图,CDS.如果指定了搜索帮助出口函数则该字段可以不输,数据来源可以在出口中自行指定 对话类型: 输 ...
- Windows 和 Linux 上Redis的安装守护进程配置
# Windows 和 Linux 上Redis的安装守护进程配置 Redis 简介 Redis是目前最常用的非关系型数据库(NOSql)之一,常以Key-Value的形式存储.Redis读写速度 ...