Refactor arrow function to be IE compatible

Question

I have a script to check for the appearance of a captcha, but are arrow functions break down on IE.

function initListener() {

              // set a global to tell that we are listening
              window.recaptchaCloseListener = true

              // find the open reCaptcha window
              HTMLCollection.prototype.find = Array.prototype.find
              var recaptchaWindow = document
                  .getElementsByTagName('iframe')
                  .find(x=>x.src.includes('google.com/recaptcha/api2/bframe'))
                    .parentNode.parentNode



              // and now we are listening on CSS changes on it
              // when the opacity has been changed to 0 we know that
              // the window has been closed
              new MutationObserver(x => recaptchaWindow.style.opacity == 0 && onClose())
                  .observe(recaptchaWindow, { attributes: true, attributeFilter: ['style'] })

            }

Two lines are problematic:

.find(x=>x.src.includes('google.com/recaptcha/api2/bframe'))
                    .parentNode.parentNode

and:

new MutationObserver(x => recaptchaWindow.style.opacity == 0 && onClose())

How do I refactor these two lines?

IE isn't just going to balk at the arrow functions, they're also gonna stop on the `includes()` as well, and maybe more. Not sure I would refactor them, but rather compile them to support your versions of IE. Are you bundling your client side code? Webpack? Gulp? Grunt? Whatever you may be using, I'd run all of your js through Babel, and setup Babel for `ie >= 10` (If you support that far back. MS doesn't, anymore). Babel will handle refactor of all of it for you, making it backwards compatible for legacy browsers. — Steve -Cutter- Blades, Feb 27 '19 at 13:23
@Steve-Cutter-Blades, I don't use either, it's a worpress installation so the js is written, well as raw js, and then enqueued. My solution below fixed all the issues, just needed a slight refactor and two polyfills. — Sean Doherty, Mar 01 '19 at 12:46
So, wait. These are your js files, right? That you're injecting into a wordpress site? You can still compile the files first, and if you have to support legacy browser then I highly suggest it. — Steve -Cutter- Blades, Mar 01 '19 at 12:57
@Steve-Cutter-Blades, I'm very new to all this tbh. The only compiling I've ever done is stripping out the unused JS components from Materialize (that's the css framework I use). Otherwise I've never needed (or known why I would need) to compile. — Sean Doherty, Mar 01 '19 at 15:31
Aside from permitting you to use modern ES code, compiling can also help you manage multiple dependencies and avoid duplication, cull your js code down to the minimum required for use in targeted browsers, and reduce the overall download footprint of your files, to allow for faster load and render times. (Especially important in mobile) — Steve -Cutter- Blades, Mar 01 '19 at 15:35
Cool man. I guess it's something I need to add to my toolkit! — Sean Doherty, Mar 01 '19 at 16:08
Has some learning curve, but ultimately well worth the effort. — Steve -Cutter- Blades, Mar 01 '19 at 16:09

score 0 · Accepted Answer · answered Feb 27 '19 at 16:50

This solution needs polyfills for .include() and Array.from(), found below:

Array.from on the Internet Explorer

ie does not support 'includes' method

And the updated code:

function initListener() {

              // set a global to tell that we are listening
              window.recaptchaCloseListener = true

              // find the open reCaptcha window

                    var frames = Array.from(document.getElementsByTagName('iframe'));
                    var recaptchaWindow;

                    frames.forEach(function(x){

                        if (x.src.includes('google.com/recaptcha/api2/bframe') ){
                            recaptchaWindow = x.parentNode.parentNode;
                        };

                    });

              // and now we are listening on CSS changes on it
              // when the opacity has been changed to 0 we know that
                // the window has been closed

                new MutationObserver(function(){
                    recaptchaWindow.style.opacity == 0 && onClose();
                })
                  .observe(recaptchaWindow, { attributes: true, attributeFilter: ['style'] })

            }

Refactor arrow function to be IE compatible

1 Answers1