Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: davidjbradshaw/iframe-resizer
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: vote/clean-iframe-resizer
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: clean
Choose a head ref
Checking mergeability… Don’t worry, you can still create the pull request.
  • 1 commit
  • 6 files changed
  • 1 contributor

Commits on Apr 20, 2020

  1. Cleaning up window and jquery 

    The vanilla version of iFrame Resizer inserts itself at window-level.
This is fine if you're using iFrame Resizer on your own site, but not
okay if you're using it on a different site.

By removing these lines, we can

Also removing a few tests because they're ancient and fail on travis.
    @nickcatal
    nickcatal committed Apr 20, 2020
    Copy the full SHA
    c9866dc View commit details
Showing with 23 additions and 148 deletions.
  1. +2 −101 README.md
  2. +4 −44 gruntfile.js
  3. +7 −0 js/iframeResizer.js
  4. +1 −1 js/iframeResizer.map
  5. +2 −2 js/iframeResizer.min.js
  6. +7 −0 src/iframeResizer.js
103 changes: 2 additions & 101 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,3 @@
# iFrame Resizer V4
# Clean iFrame resizer

[![NPM version](https://badge.fury.io/js/iframe-resizer.svg)](http://badge.fury.io/js/iframe-resizer)
[![NPM Downloads](https://img.shields.io/npm/dm/iframe-resizer.svg)](https://npm-stat.com/charts.html?package=iframe-resizer&from=2014-12-31)
[![](https://data.jsdelivr.com/v1/package/npm/iframe-resizer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/iframe-resizer)
[![Coverage Status](https://coveralls.io/repos/davidjbradshaw/iframe-resizer/badge.svg?branch=master&service=github)](https://coveralls.io/github/davidjbradshaw/iframe-resizer)
[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://www.paypal.me/davidjbradshaw)

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.
- Supports IE 11 ([V3 supports back to IE8](https://github.com/davidjbradshaw/iframe-resizer/tree/V3))

## Donate

Iframe-resizer is the result of many 100s of hours of work, if you would like to join others in showing support for the development of this project, then please feel free to buy me a coffee.

<a href="https://www.buymeacoffee.com/davidjbradshaw " target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

## Getting Started

### Install

This package can be installed via NPM (`npm install iframe-resizer --save`).

### Usage

The package contains two minified JavaScript files in the [js](https://github.com/davidjbradshaw/iframe-resizer/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 via JavaScript:

```js
const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
```

The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) 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: 1px;
min-width: 100%;
}
</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
iFrameResize({ log: true }, '#myIframe')
</script>
```

**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.

If you have problems, check the [troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md) section.

### 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).

## API Documentation

IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.

- **Parent Page API**
- [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md)
- [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/events.md)
- [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/methods.md)
- **IFramed Page API**
- [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/options.md)
- [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/events.md)
- [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md)
- **Use with Libraries and Frameworks**
- [React](https://github.com/davidjbradshaw/iframe-resizer-react)
- [Vue](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md)
- [Angular](https://github.com/davidjbradshaw/iframe-resizer/issues/478#issuecomment-347958630)
- [jQuery](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/jquery.md)
- [Troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md)
- [Upgrade from version 3](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/upgrade.md)
- [Version history](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CHANGELOG.md)

## License

Copyright &copy; 2013-20 [David J. Bradshaw](https://github.com/davidjbradshaw).
Licensed under the [MIT License](LICENSE).

<!--
[![NPM](https://nodei.co/npm/iframe-resizer.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/iframe-resizer/)
[![Build Status](https://travis-ci.org/davidjbradshaw/iframe-resizer.svg?branch=master)](https://travis-ci.org/davidjbradshaw/iframe-resizer)
[![Known Vulnerabilities](https://snyk.io/test/github/davidjbradshaw/iframe-resizer/badge.svg)](https://snyk.io/test/github/davidjbradshaw/iframe-resizer)
-->
Clean iFrame Resizer is a fork of [iFrame Resizer](https://github.com/davidjbradshaw/iframe-resizer) that does not pollute `window` or try to add a plugin to `jquery`
48 changes: 4 additions & 44 deletions gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -36,40 +36,6 @@ module.exports = function (grunt) {

clean: ['coverage', 'coverageLcov'],

qunit: {
files: ['test/*.html'],
puppeteer: {
args: [
'--disable-web-security',
'--allow-file-access-from-files',
'--user-data-dir=/tmp'
]
}
},

karma: {
options: {
configFile: 'karma.conf.js'
},
travis: {
singleRun: true,
browsers: ['Chrome'], // 'PhantomJS'
coverageReporter: {
type: 'lcov',
dir: 'coverageLcov/'
}
},
single: {
singleRun: true,
browsers: ['Chrome', 'Firefox'] // 'Safari', 'PhantomJS'
},
watch: {
singleRun: false,
browsers: ['Chrome'], // 'Firefox', 'Safari', 'PhantomJS'
reporters: ['logcapture', 'progress']
}
},

coveralls: {
options: {
debug: true,
@@ -182,18 +148,12 @@ module.exports = function (grunt) {
}
})

grunt.registerTask('default', ['notest', 'karma:single'])
grunt.registerTask('default', ['notest'])
grunt.registerTask('build', ['removeBlock', 'copy', 'uglify'])
grunt.registerTask('notest', ['eslint', 'jsonlint', 'build'])
grunt.registerTask('test', ['clean', 'eslint', 'karma:single', 'qunit'])
grunt.registerTask('test-watch', ['clean', 'karma:watch'])
grunt.registerTask('travis', [
'clean',
'notest',
'qunit',
'karma:travis',
'coveralls'
])
grunt.registerTask('test', ['clean', 'eslint'])
grunt.registerTask('test-watch', ['clean'])
grunt.registerTask('travis', ['clean', 'notest', 'coveralls'])

grunt.registerTask('postBump', ['build', 'bump-commit', 'shell'])
grunt.registerTask('preBump', ['clean', 'notest'])
7 changes: 7 additions & 0 deletions js/iframeResizer.js
View file
Original file line number Diff line number Diff line change
@@ -1355,6 +1355,9 @@
}
}

/*
REMOVING THIS CODE TO KEEP THE WINDOW CLEAN
function createJQueryPublicMethod($) {
if (!$.fn) {
info('', 'Unable to bind to jQuery, it is not fully loaded.')
@@ -1374,12 +1377,16 @@
if (window.jQuery) {
createJQueryPublicMethod(window.jQuery)
}
*/

if (typeof define === 'function' && define.amd) {
define([], factory)
} else if (typeof module === 'object' && typeof module.exports === 'object') {
// Node for browserfy
module.exports = factory()
}
/*
REMOVING THIS LINE TO KEEP CLEAN
window.iFrameResize = window.iFrameResize || factory()
*/
})()
Loading