V5.0.0

.eslintrc

@@ -11,13 +11,13 @@
   },
   "parserOptions": { "ecmaVersion": 2015 },
   "rules": {
+    "const-case/uppercase": 0,
     "func-names": 0,
     "global-require": 0,
     "no-param-reassign": 0,
     "no-plusplus": 0,
     "no-use-before-define": 0,
     "no-shadow": 0,
-    "no-var": 0,
     "object-shorthand": 0,
     "one-var": 0,
     "prefer-arrow-callback": 0,
@@ -28,7 +28,6 @@
     "vars-on-top": 0,
     "yoda": 0,
     "ie11/no-collection-args": ["error"],
-    "ie11/no-for-in-const": ["error"],
     "ie11/no-loop-func": ["warn"],
     "ie11/no-weak-collections": ["error"],
     "import/no-amd": 0,
@@ -48,11 +47,13 @@
     "unicorn/prefer-node-append": 0,
     "unicorn/prefer-node-protocol": 0,
     "unicorn/prefer-node-remove": 0,
+    "unicorn/prefer-number-properties": 0,
     "unicorn/prefer-query-selector": 0,
+    "unicorn/prefer-spread": 0,
     "unicorn/prefer-string-slice": 0,
     "unicorn/prefer-top-level-await": 0,
-    "unicorn/prefer-number-properties": 0,
     "unicorn/prevent-abbreviations": 0,
-    "unicorn/switch-case-braces": 0
+    "unicorn/switch-case-braces": 0,
+    "xss/no-mixed-html": 0
   }
 }

README.md

@@ -12,6 +12,7 @@ This library enables the automatic resizing of the height and width of both same
 - 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 HTML elements resizing with [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver).
 - 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.

docs/troubleshooting.md

@@ -30,7 +30,7 @@ The most common cause of this is not placing the [iframeResizer.contentWindow.mi
 
 ### 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
+CSS `:hover` events that cause the page to resize outside of the standard document flow can sometimes be difficult to detect. If this is an issue, then a workaround is 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
 function resize(){
@@ -43,6 +43,7 @@ function resize(){
 $(*Element with hover style*).hover(resize);
 ```
 
+<!--
 ### IFrame not detecting textarea resizes
 
 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.
@@ -64,6 +65,7 @@ $('textarea')
     }
   })
 ```
+-->
 
 ### IFrame flickers
 

example/frame.absolute.html

@@ -109,7 +109,7 @@
       >
     </div>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
 
     <script
       type="text/javascript"

example/frame.content.html

@@ -5,7 +5,7 @@
     <title>iFrame message passing test</title>
     <meta name="description" content="iFrame message passing test" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <style>
       *,
       *:before,

example/frame.hover.html

@@ -18,7 +18,15 @@
     <a href="frame.content.html">Back to page 1</a>
 
     <p>
-      Mouse over the code example below.
+      Mouse over the code example below. 
+    </p>
+    <p>  
+      In modern browsers size changes caused by CSS are detected via the ResizeObserver API, 
+      however, if you have an element outside the standard document flow, or in really old browses you may need to detect this
+      yourself and ask iFrameResizer to update the page size.
+    </p>
+    <p>  
+      Uncomment the code below to see this working.
     </p>
 
     <xmp>
@@ -31,10 +39,10 @@
       }
     </script>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <script
       type="text/javascript"
-      src="../js/iframeResizer.contentWindow.min.js"
+      src="../js/iframeResizer.contentWindow.js"
     ></script>
 
     <div id="code">
@@ -50,14 +58,14 @@
         }
       </style>
       <script>
-        ;(function() {
-          $('xmp').hover(function() {
-            if ('parentIFrame' in window) {
-              // Fix race condition in FireFox with setTimeout
-              setTimeout(parentIFrame.size.bind(parentIFrame), 0)
-            }
-          })
-        })()
+        // ;(function() {
+        //   $('xmp').hover(function() {
+        //     if ('parentIFrame' in window) {
+        //       // Fix race condition in FireFox with setTimeout
+        //       setTimeout(parentIFrame.size.bind(parentIFrame), 0)
+        //     }
+        //   })
+        // })()
       </script>
     </div>
 

example/frame.nested.html

@@ -43,7 +43,7 @@ <h2>Nested iFrame</h2>
     </div>
     <p id="callback"></p>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
 
     <script type="text/javascript" src="../js/iframeResizer.min.js"></script>
     <script type="text/javascript">

example/frame.textarea.html

@@ -23,7 +23,7 @@
 
     <textarea id="textArea">Resize me</textarea>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <script src="../js/iframeResizer.contentWindow.min.js"></script>
 
     <script>

example/frame.tolerance.html

@@ -96,7 +96,7 @@
       >
     </div>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <script
       type="text/javascript"
       src="../js/iframeResizer.contentWindow.min.js"

example/index.html

@@ -30,7 +30,7 @@ <h2>Automagically resizing iFrame</h2>
 
     <![endif]-->
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <script type="text/javascript" src="../js/iframeResizer.min.js"></script>
     <script type="text/javascript">
       /*

example/two.html

@@ -37,7 +37,7 @@ <h2>Automagically resizing iFrame</h2>
 
     <![endif]-->
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="jquery-3.7.1.min.js"></script>
     <script type="text/javascript" src="../src/iframeResizer.js"></script>
     <script type="text/javascript">
       /*

gruntfile.js

@@ -61,7 +61,7 @@ module.exports = function (grunt) {
       },
       single: {
         singleRun: true,
-        browsers: ['Chrome', 'Firefox'] // 'Safari', 'PhantomJS'
+        browsers: ['Chrome'] // 'Firefox', 'PhantomJS', 'Safari'
       },
       watch: {
         singleRun: false,
@@ -136,8 +136,8 @@ module.exports = function (grunt) {
       },
       deployExample: {
         command: function () {
-          var retStr = '',
-            fs = require('fs')
+          let retStr = ''
+          const fs = require('fs')
 
           if (fs.existsSync('bin')) {
             retStr = 'bin/deploy.sh'
@@ -199,7 +199,7 @@ module.exports = function (grunt) {
   grunt.registerMultiTask('removeBlock', function () {
     // set up a removal regular expression
     // eslint-disable-next-line security/detect-non-literal-regexp
-    var removalRegEx = new RegExp(
+    const removalRegEx = new RegExp(
       '(// ' +
         this.options()[0] +
         ' //)(?:[^])*?(// ' +
@@ -209,8 +209,8 @@ module.exports = function (grunt) {
     )
 
     this.data.forEach(function (fileObj) {
-      var sourceFile = grunt.file.read(fileObj.src)
-      var removedFile = sourceFile.replace(removalRegEx, '')
+      const sourceFile = grunt.file.read(fileObj.src)
+      const removedFile = sourceFile.replace(removalRegEx, '')
 
       grunt.file.write(fileObj.dest, removedFile)
     }) // for each loop end