Auto resize example iframes when the content changes

lib/metalsmith.js

@@ -55,6 +55,7 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
     files: [
       'javascripts/vendor/jquery.js',
       'javascripts/vendor/clipboard.js',
+      'javascripts/vendor/iframeResizer.js',
       'javascripts/components/example.js',
       'javascripts/components/tabs.js',
       'javascripts/components/copy.js',
@@ -65,7 +66,11 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
   }))
   // concatenate IE only javascript files
   .use(concat({
-    files: ['javascripts/vendor/html5shiv-printshiv.js', 'javascripts/ie-only.js'],
+    files: [
+      'javascripts/vendor/html5shiv-printshiv.js',
+      'javascripts/vendor/iframeResizer.ie8.polyfils.js',
+      'javascripts/ie-only.js'
+    ],
     output: 'javascripts/ie.js'
   }))
 

src/javascripts/components/example.js

@@ -5,10 +5,14 @@
 
   GOVUK.example = {
     init: function (selector) {
-      // Example iframe; set the height equal to the body height
-      $(selector).on('load', function () {
-        this.style.height = this.contentDocument.body.scrollHeight + 'px'
-      })
+      try {
+        // Example iframe; set the height equal to the body height
+        $(selector).iFrameResize({scrolling: 'auto'})
+      } catch (err) {
+        if (err) {
+          console.error(err.message)
+        }
+      }
     }
   }
   global.GOVUK = GOVUK