Merge 7e9e4a2 into d8ba326

davidjbradshaw · Feb 24, 2019 · 658a00e · 658a00e
2 parents d8ba326 + 7e9e4a2
commit 658a00e
Show file tree

Hide file tree

Showing 55 changed files with 2,704 additions and 2,479 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,10 @@
 {
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true
-}
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false
+  }
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -11,10 +11,9 @@ The [issue tracker](https://github.com/davidjbradshaw/iframe-resizer/issues) is
 the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
 and [submitting pull requests](#pull-requests).
 
-**Please do not use the issue tracker for personal support requests.  These should be raised on 
+**Please do not use the issue tracker for personal support requests. These should be raised on
 Stack Overflow ([`iframe-resizer`](http://stackoverflow.com/questions/tagged/iframe-resizer) tag).**
 
-
 ## Bug reports
 
 A bug is a _demonstrable problem_ that is caused by the code in the repository.
@@ -28,13 +27,12 @@ Guidelines for bug reports:
 1. **Use the GitHub issue search** &mdash; check if the issue has already been
    reported.
 
-2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
+1. **Check if the issue has been fixed** &mdash; try to reproduce it using the
    latest `master` or development branch in the repository.
 
-3. **Isolate the problem** &mdash; ideally create a [reduced test
+1. **Isolate the problem** &mdash; ideally create a [reduced test
    case](https://css-tricks.com/reduced-test-cases/) and a live example.
 
-
 A good bug report shouldn't leave others needing to chase you up for more
 information. Please try to be as detailed as possible in your report. What is
 your environment? What steps will reproduce the issue? What browser(s) and OS
@@ -63,8 +61,7 @@ Example:
 ## Feature requests
 
 Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. 
-
+fits with the scope and aims of the project.
 
 ## Pull requests
 
@@ -77,10 +74,10 @@ implementing features or refactoring code),
 otherwise you risk spending a lot of time working on something that the
 project's developers might not want to merge into the project.
 
-In lieu of a formal style-guide, take care to maintain the existing coding 
-style. Add unit tests for any new or changed functionality. Lint and test 
+In lieu of a formal style-guide, take care to maintain the existing coding
+style. Add unit tests for any new or changed functionality. Lint and test
 your code using [Grunt](http://gruntjs.com/).
 
 ## License
 
-By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
+By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # iFrame Resizer V4
+
 [![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=2015-09-01)
 [![](https://data.jsdelivr.com/v1/package/npm/iframe-resizer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/iframe-resizer)
@@ -7,18 +8,18 @@
 
 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))
+- 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))
 
 ## Getting Started
 
@@ -41,9 +42,16 @@ The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/dav
 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>
+<style>
+  iframe {
+    width: 1px;
+    min-width: 100%;
+  }
+</style>
 <iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
-<script>iFrameResize({log:true}, '#myIframe')</script>
+<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.
@@ -58,25 +66,26 @@ To see this working take a look at this [example](http://davidjbradshaw.com/ifra
 
 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/docs/parent_page/options.md)
-  * [Events](https://github.com/davidjbradshaw/iframe-resizer/docs/parent_page/events.md)
-  * [Methods](https://github.com/davidjbradshaw/iframe-resizer/docs/parent_page/methods.md)
-* **IFramed Page API**
-  * [Options](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/options.md)
-  * [Events](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/events.md)
-  * [Methods](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/methods.md)
-* [Use with jQuery](https://github.com/davidjbradshaw/iframe-resizer/docs/jquery.md)
-* [Troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/docs/troubleshooting.md)
-* [Upgrade from version 3](https://github.com/davidjbradshaw/iframe-resizer/docs/upgrade.md)
-* [Version history](https://github.com/davidjbradshaw/iframe-resizer/CHANGELOG.md)
+- **Parent Page API**
+  - [Options](https://github.com/davidjbradshaw/iframe-resizer/docs/parent_page/options.md)
+  - [Events](https://github.com/davidjbradshaw/iframe-resizer/docs/parent_page/events.md)
+  - [Methods](https://github.com/davidjbradshaw/iframe-resizer/docs/parent_page/methods.md)
+- **IFramed Page API**
+  - [Options](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/options.md)
+  - [Events](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/events.md)
+  - [Methods](https://github.com/davidjbradshaw/iframe-resizer/docs/iframed_page/methods.md)
+- [Use with jQuery](https://github.com/davidjbradshaw/iframe-resizer/docs/jquery.md)
+- [Troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/docs/troubleshooting.md)
+- [Upgrade from version 3](https://github.com/davidjbradshaw/iframe-resizer/docs/upgrade.md)
+- [Version history](https://github.com/davidjbradshaw/iframe-resizer/CHANGELOG.md)
 
 ## License
 
 Copyright &copy; 2013-19 [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/)  
+[![NPM](https://nodei.co/npm/iframe-resizer.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/iframe-resizer/)
 [![Greenkeeper badge](https://badges.greenkeeper.io/davidjbradshaw/iframe-resizer.svg)](https://greenkeeper.io/)
 [![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)

diff --git a/bower.json b/bower.json
@@ -2,14 +2,9 @@
   "name": "iframe-resizer",
   "version": "3.6.5",
   "homepage": "https://github.com/davidjbradshaw/iframe-resizer",
-  "authors": [
-    "David J. Bradshaw <dave@bradshaw.net>"
-  ],
+  "authors": ["David J. Bradshaw <dave@bradshaw.net>"],
   "description": "Responsively keep same and cross domain iFrames sized to their content with support for window/content resizing, multiple and nested iFrames. (Dependacy free and works with IE8+)",
-  "main": [
-    "js/iframeResizer.js",
-    "js/iframeResizer.contentWindow.js"
-  ],
+  "main": ["js/iframeResizer.js", "js/iframeResizer.contentWindow.js"],
   "keywords": [
     "CrossDomain",
     "Cross-Domain",
@@ -33,13 +28,7 @@
     "responsive-iframes"
   ],
   "license": "MIT",
-  "ignore": [
-    "example",
-    "test",
-    "gruntfile.js",
-    "*.md",
-    "*.json"
-  ],
+  "ignore": ["example", "test", "gruntfile.js", "*.md", "*.json"],
   "dependencies": {},
   "devDependencies": {}
 }
diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -19,9 +19,16 @@ The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/dav
 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>
+<style>
+  iframe {
+    width: 1px;
+    min-width: 100%;
+  }
+</style>
 <iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
-<script>iFrameResize({log:true}, '#myIframe')</script>
+<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.

diff --git a/docs/jquery.md b/docs/jquery.md
@@ -3,5 +3,5 @@
 This library also provides a simple jQuery interface
 
 ```js
-$('iframe').iFrameResize( [{options}] );
+$('iframe').iFrameResize([{ options }])
 ```
diff --git a/docs/readme.md b/docs/readme.md
@@ -1,15 +1,15 @@
 # iFrame-Resizer Documentation
 
-* [Getting Started](getting_started.md)
-* **Parent Page API**
-  * [Options](parent_page/options.md)
-  * [Events](parent_page/events.md)
-  * [Methods](parent_page/methods.md)
-* **IFramed Page API**
-  * [Options](iframed_page/options.md)
-  * [Events](iframed_page/events.md)
-  * [Methods](iframed_page/methods.md)
-* [Use with jQuery](jquery.md)
-* [Troubleshooting](troubleshooting.md)
-* [Upgrade from version 3](upgrade.md)
-* [Version history](../CHANGELOG.md)
+- [Getting Started](getting_started.md)
+- **Parent Page API**
+  - [Options](parent_page/options.md)
+  - [Events](parent_page/events.md)
+  - [Methods](parent_page/methods.md)
+- **IFramed Page API**
+  - [Options](iframed_page/options.md)
+  - [Events](iframed_page/events.md)
+  - [Methods](iframed_page/methods.md)
+- [Use with jQuery](jquery.md)
+- [Troubleshooting](troubleshooting.md)
+- [Upgrade from version 3](upgrade.md)
+- [Version history](../CHANGELOG.md)
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
@@ -1,4 +1,3 @@
-
 ## Troubleshooting
 
 The first steps to investigate a problem is to make sure you are using the latest version and then enable the [log](#log) option, which outputs everything that happens to the [JavaScript Console](https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console). This will enable you to see what both the iFrame and host page are up to and also see any JavaScript error messages.
@@ -8,12 +7,15 @@ Solutions for the most common problems are outlined in this section. If you need
 Bug reports and pull requests are welcome on the [issue tracker](https://github.com/davidjbradshaw/iframe-resizer/issues). Please read the [contributing guidelines](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CONTRIBUTING.md) before openning a ticket, as this will ensure a faster resolution.
 
 ### Multiple IFrames on one page
+
 When the resizer does not work using multiple IFrames on one page, make sure that each frame has an unique id or no ids at all.
 
 ### IFrame not sizing correctly
+
 If a larger element of content is removed from the normal document flow, through the use of absolute positioning, it can prevent the browser working out the correct size of the page. In such cases you can change the [heightCalculationMethod](#heightcalculationmethod) to uses one of the other sizing methods.
 
 ### IFrame not downsizing
+
 The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS. This is normally on the `html` or `body` elements, but it could be on any element in the page. This can sometimes be got around by using the `taggedElement` height calculation method and added a `data-iframe-height` attribute to the element that you want to define the bottom position of the page. You may find it useful to use `position: relative` on this element to define a bottom margin or allow space for a floating footer.
 
 Not having a valid [HTML document type](http://en.wikipedia.org/wiki/Document_type_declaration) in the iFrame can also sometimes prevent downsizing. At it's most simplest this can be the following.
@@ -23,9 +25,11 @@ Not having a valid [HTML document type](http://en.wikipedia.org/wiki/Document_ty
 ```
 
 ### IFrame not resizing
+
 The most common cause of this is not placing the [iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js) script inside the iFramed page. If the other page is on a domain outside your control and you can not add JavaScript to that page, then now is the time to give up all hope of ever getting the iFrame to size to the content. As it is impossible to work out the size of the contained page, without using JavaScript on both the parent and child pages.
 
 ### IFrame not detecting CSS :hover events
+
 If your page resizes via CSS `:hover` events, these won't be detected by default. It is however possible to create `mouseover` and `mouseout` event listeners on the elements that are resized via CSS and have these events call the [parentIFrame.size()](##parentiframesize-customheight-customwidth) method. With jQuery this can be done as follows
 
 ```js
@@ -44,19 +48,21 @@ $(*Element with hover style*).hover(resize);
 Both FireFox and the WebKit based browsers allow the user to resize `textarea` input boxes. Unfortunately the WebKit browsers don't trigger the mutation event when this happens. This can be worked around to some extent with the following code.
 
 ```js
-function store(){
-  this.x = this.offsetWidth;
-  this.y = this.offsetHeight;
+function store() {
+  this.x = this.offsetWidth
+  this.y = this.offsetHeight
 }
 
-$('textarea').each(store).on('mouseover mouseout',function(){
-  if (this.offsetWidth !== this.x || this.offsetHeight !== this.y){
-    store.call(this);
-    if ('parentIFrame' in window){
-      parentIFrame.size();
+$('textarea')
+  .each(store)
+  .on('mouseover mouseout', function() {
+    if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
+      store.call(this)
+      if ('parentIFrame' in window) {
+        parentIFrame.size()
+      }
     }
-  }
-});
+  })
 ```
 
 ### IFrame flickers
@@ -68,25 +74,29 @@ In modern browsers, if the default [height calculation method](#heightcalculatio
 <i>Please see the notes section under [heightCalculationMethod](#heightcalculationmethod) to understand the limitations of the different options.</i>
 
 ### ParentIFrame not found errors
+
 The `parentIFrame` object is created once the iFrame has been initially resized. If you wish to use it during page load you will need call it from the onReady.
 
 ```html
 <script>
   window.iFrameResizer = {
-    onReady: function(){
-      var myId = window.parentIFrame.getId();
-      console.log('The ID of the iFrame in the parent page is: ' + myId);
+    onReady: function() {
+      var myId = window.parentIFrame.getId()
+      console.log('The ID of the iFrame in the parent page is: ' + myId)
     }
   }
 </script>
 <script src="js/iframeresizer.contentwindow.js"></script>
 ```
 
 ### PDF and OpenDocument files
+
 It is not possible to add the required JavaScript to PDF and ODF files. However, you can get around this limitation by using [ViewerJS](http://viewerjs.org/) to render these files inside a HTML page, that also contains the iFrame JavaScript file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)).
 
 ### Unexpected message received error
+
 By default the origin of incoming messages is checked against the `src` attribute of the iFrame. If they don't match an error is thrown. This behaviour can be disabled by setting the [checkOrigin](#checkorigin) option to **false**.
 
 ### Width not resizing
+
 By default only changes in height are detected, if you want to calculate the width you need to set the `sizeWidth` opion to true and the `sizeHeight` option to false.