# iFrame Resizer
[![NPM version](https://badge.fury.io/js/iframe-resizer.svg)](http://badge.fury.io/js/iframe-resizer)
[![Bower version](https://badge.fury.io/bo/iframe-resizer.svg)](http://badge.fury.io/bo/iframe-resizer)
[![Build Status](https://travis-ci.org/davidjbradshaw/iframe-resizer.svg?branch=master)](https://travis-ci.org/davidjbradshaw/iframe-resizer)
[![Coverage Status](https://coveralls.io/repos/davidjbradshaw/iframe-resizer/badge.svg?branch=master&service=github)](https://coveralls.io/github/davidjbradshaw/iframe-resizer)
This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:
* Height and width resizing of the iFrame to content size.
* Works with multiple and nested iFrames.
* Domain authentication for cross domain iFrames.
* Provides a range of page size calculation methods to support complex CSS layouts.
* Detects changes to the DOM that can cause the page to resize using [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver).
* Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
* Simplified messaging between iFrame and host page via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage).
* Fixes in page links in iFrame and supports links between the iFrame and parent page.
* Provides custom sizing and scrolling methods.
* Exposes parent position and viewport size to the iFrame.
* Works with [ViewerJS](http://viewerjs.org/) to support PDF and ODF documents.
* Fallback support down to IE8.
### Install
This package can be installed via NPM (`npm install iframe-resizer -save`) or Bower (`bower install iframe-resizer`).
### Getting started
The package contains two minified JavaScript files in the [js](js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with **native** JavaScript;
```js
var iframes = iFrameResize( [{options}], [css selector] || [iframe] );
```
or via **jQuery**. (See [notes](#browser-compatibility) below for using native version with IE8).
```js
$('iframe').iFrameResize( [{options}] );
```
The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) is a **native** JavaScript file that needs placing in the page contained within your iFrame. <i>This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page</i>.
### Typical setup
The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
```html
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
```
Note that scrolling is set to 'no' in the iFrame tag, as older versions of IE don't allow this to be turned off in code and can just slightly add a bit of extra space to the bottom of the content that it doesn't report when it returns the height. If you have problems, check the [troubleshooting](#troubleshooting) section below.
### Example
To see this working take a look at this [example](http://davidjbradshaw.com/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).
## Options
### log
default: false
type: boolean
Setting the `log` option to true will make the scripts in both the host page and the iFrame output everything they do to the JavaScript console so you can see the communication between the two scripts.
### autoResize
default: true
type: boolean
When enabled changes to the Window size or the DOM will cause the iFrame to resize to the new content size. Disable if using size method with custom dimensions.
<i>Note: When set to false the iFrame will still inititally size to the contained content, only additional resizing events are disabled.</i>
### bodyBackground
default: null
type: string
Override the body background style in the iFrame.
### bodyMargin
default: null
type: string || number
Override the default body margin style in the iFrame. A string can be any valid value for the CSS margin attribute, for example '8px 3em'. A number value is converted into px.
### checkOrigin
default: true
type: boolean || array
When set to true, only allow incoming messages from the domain listed in the `src` property of the iFrame tag. If your iFrame navigates between different domains, ports or protocols; then you will need to provide an array of URLs or disable this option.
### inPageLinks
default: false
type: boolean
When enabled in page linking inside the iFrame and from the iFrame to the parent page will be enabled.
### interval
default: 32 (in ms)
type: number
In browsers that don't support [mutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver), such as IE10, the library falls back to using setInterval, to check for changes to the page size. The default value is equal to two frame refreshes at 60Hz, setting this to a higher value will make screen redraws noticeable to the user.
Setting this property to a negative number will force the interval check to run instead of [mutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver).
Set to zero to disable.
### heightCalculationMethod
default: 'bodyOffset'
values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
'max' | 'min' | 'grow' | 'lowestElement' | 'taggedElement'
By default the height of the iFrame is calculated by converting the margin of the `body` to <i>px</i> and then adding the top and bottom figures to the offsetHeight of the `body` tag.
In cases where CSS styles causes the content to flow outside the `body` you may need to change this setting to one of the following options. Each can give different values depending on how CSS is used in the page and each has varying side-effects. You will need to experiment to see which is best for any particular circumstance.
* **bodyScroll** uses `document.body.scrollHeight` <sup>*</sup>
* **documentElementOffset** uses `document.documentElement.offsetHeight`
* **documentElementScroll** uses `document.documentElement.scrollHeight` <sup>*</sup>
* **max** takes the largest value of the main four options <sup>*</sup>
* **min** takes the smallest value of the main four options <sup>*</sup>
* **grow** same as **max** but disables the double resize that is used to workout if the iFrame needs to shrink. This provides much better performance if your iFrame will only ever increase in size
* **lowestElement** Loops though every element in the the DOM and finds the lowest bottom point <sup>†</sup>
* **taggedElement** Finds the bottom of the lowest element with a `data-iframe-height` attribute
<i>Notes:</i>
<i>**If the default option doesn't work then the best solutions is to either to use** taggedElement, **or to use** lowestElement **in modern browsers and** max **in IE10 downwards.**</i>
```js
var isOldIE = (navigator.userAgent.indexOf("MSIE") !== -1); // Detect IE10 and below
iFrameResize( {
heightCalculationMethod: isOldIE ? 'max' : 'lowestElement'
});
```
Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see [iFrame Page Options](https://github.com/davidjbrad
没有合适的资源?快使用搜索试试~ 我知道了~
iframe自适应宽高
共84个文件
html:37个
js:32个
json:4个
5星 · 超过95%的资源 需积分: 42 44 下载量 135 浏览量
2016-11-08
14:12:54
上传
评论
收藏 322KB ZIP 举报
温馨提示
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件(窗口大小调整,CSS动画和过渡,改变方向和鼠标事件)。 简化通讯和主机之间通过PostMessage iframe的网页。 在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
资源推荐
资源详情
资源评论
收起资源包目录
iframe-resizer.zip (84个子文件)
iframe-resizer
iframeResizer.jquery.json 1012B
.gitignore 111B
gruntfile.js 6KB
karma.conf.js 2KB
README.md 42KB
test
sendMessage.html 2KB
interval.html 1KB
resources
qunit.css 5KB
require.js 82KB
frame.lateload.html 806B
frame.nested.html 1KB
qunit.js 60KB
frame.content.html 13KB
testLib.js 289B
jquery.js 82KB
djb.jpg 55KB
mutationObserver.html 2KB
changePage.html 1KB
scrolling.html 2KB
close.html 1015B
margin.html 2KB
jqueryNoConflict.html 1KB
_init_once.html 1KB
background.html 1KB
v1.html 5KB
_init.html 1KB
size.html 2KB
nested.html 1KB
resize.width.html 2KB
setHeightCalculationMethod.html 1KB
lateImageLoad.html 2KB
getId.html 1KB
_init_once_async.html 2KB
resize.contentWidth.html 1KB
LICENSE 1KB
bower.json 1011B
package.json 2KB
CONTRIBUTING.md 3KB
src
iframeResizer.js 26KB
iframeResizer.contentWindow.js 31KB
ie8.polyfils.js 2KB
index.js 50B
spec
scrollSpec.js 845B
initUndefinedDomSpec.js 490B
support
jasmine.json 111B
parentSpec.js 2KB
anchorSpec.js 1KB
resources
frame.lateload.html 806B
frame.nested.html 1KB
frame.content.html 13KB
djb.jpg 55KB
javascripts
fixtures
iframe600.html 195B
iframe.html 91B
iframe600WithId.html 211B
initDomSpec.js 499B
getPageInfoSpec.js 738B
sendMessageSpec.js 1KB
initCssSpec.js 620B
initErrorSpec.js 1KB
initJQuerySpec.js 492B
_initSpec.js 1KB
closeSpecSpec.js 774B
initDoubleCallSpec.js 692B
lib
common.js 1KB
childSpec.js 13KB
example
frame.absolute.html 3KB
frame.nested.html 2KB
two.html 3KB
frame.textarea.html 1004B
frame.hover.html 1KB
frame.content.html 4KB
index.html 3KB
frame.tolerance.html 3KB
test-main.js 1KB
js
iframeResizer.contentWindow.min.js 14KB
iframeResizer.contentWindow.map 52KB
ie8.polyfils.min.js 1KB
iframeResizer.js 26KB
iframeResizer.min.js 12KB
iframeResizer.contentWindow.js 30KB
iframeResizer.map 46KB
index.js 131B
ie8.polyfils.map 3KB
.travis.yml 93B
共 84 条
- 1
资源评论
- ct2853766722016-11-08很赞,很好的解决了iframe根据内部内容自适应宽度和高度的问题,找了一上午才找到这么good的资源
章元_
- 粉丝: 1
- 资源: 13
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- NetOps-py通过sftp替换网络设备启动文件
- STM32单片机FPGA毕设电路原理论文报告任务驱动教学法在单片机课程教学中的应用
- STM32单片机FPGA毕设电路原理论文报告任务驱动法在单片机教学中的应用
- STM32单片机FPGA毕设电路原理论文报告人造金刚石压机智能化压力测控系统设计
- 以某列为依据匹配多项(Excel版)
- STM32单片机FPGA毕设电路原理论文报告人体短臂离心机实验台的显示控制系统
- STM32单片机FPGA毕设电路原理论文报告人工气候室监控系统的环境控制器研究
- STM32单片机FPGA毕设电路原理论文报告染整自动线张力控制系统的设计
- 数据挖掘与机器学习-实验
- 基于Linux系统Nginx的动态网站的LNMP环境源码包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功