[IE에서만 화면이 안떠요] SCRIPT1002: 구문오류

Question

안녕하세요!선배님들 :) 로그인 페이지가 크롬 및 모바일에서는 잘보이는데 IE에서는 Class가 Active로 변경이 되지 않아화면이 나오지 않습니다. SCRIPT1002: 구문오류(10,2)가 떠서 코드를 까봤는데 뭐가 문제인지 모르겠습니다...혹시 보시고 뭐가 문제인지 가르쳐주실 수 있으신지요? jQuery(document).ready(function($){ var formsTrigger &#61; { 'xoo-el-login-tgr': 'login', 'xoo-el-reg-tgr': 'register', 'xoo-el-lostpw-tgr': 'lostpw', 'xoo-el-resetpw-tgr': 'resetpw' } class Container{ constructor( $container ){ this.$container &#61; $container; this.$tabs &#61; $container.find('ul.xoo-el-tabs').length ? $container.find( 'ul.xoo-el-tabs' ) : null; this.display &#61; $container.hasClass('xoo-el-form-inline') ? 'inline' : 'popup'; if( this.$container.attr('data-active') ){ this.toggleForm( this.$container.attr('data-active') ); } this.eventHandlers(); } eventHandlers(){ this.formTriggerEvent(); this.$container.on( 'submit', '.xoo-el-action-form', this.submitForm.bind(this) ) ; } formTriggerEvent(){ var container &#61; this; $.each( formsTrigger, function( triggerClass, formType ){ $( container.$container ).on( 'click', '.' &#43; triggerClass, function(e){ e.preventDefault(); e.stopImmediatePropagation(); container.toggleForm(formType); } ) } ); } toggleForm( formType ){ this.$container.attr( 'data-active', formType ); var $section &#61; this.$container.find('.xoo-el-section[data-section&#61;&#34;'&#43;formType&#43;'&#34;]'), activeClass &#61; 'xoo-el-active'; //Setting section if( $section.length ){ this.$container.find('.xoo-el-section').removeClass( activeClass ); $section.addClass( activeClass ); $section.find('.xoo-el-notice').html('').hide(); $section.find('.xoo-el-action-form').show(); } //Setting Tab if( this.$tabs ){ this.$tabs.find('li').removeClass( activeClass ); if( this.$tabs.find('li[data-tab&#61;&#34;'&#43;formType&#43;'&#34;]').length ){ this.$tabs.find('li[data-tab&#61;&#34;'&#43;formType&#43;'&#34;]').addClass( activeClass ); } } $(document.body).trigger( 'xoo_el_form_toggled', [ formType, this ] ); } submitForm(e){ e.preventDefault(); var $form &#61; $(e.currentTarget), $button &#61; $form.find('button[type&#61;&#34;submit&#34;]'), $section &#61; $form.parents('.xoo-el-section'), buttonTxt &#61; $button.text(), $notice &#61; $section.find('.xoo-el-notice'), formType &#61; $section.attr('data-section'), container &#61; this; $button.html( xoo_el_localize.html.spinner ).addClass('xoo-el-processing'); var form_data &#61; $form.serialize() &#43; '&action&#61;xoo_el_form_action' &#43; '&display&#61;' &#43; container.display; $.ajax({ url: xoo_el_localize.adminurl, type: 'POST', data: form_data, success: function(response){ $button.removeClass('xoo-el-processing').html(buttonTxt); //Unexpected response if( response.error &#61;&#61;&#61; undefined ){ console.log(response); location.reload(); return; } if( response.notice ){ $notice.html(response.notice).show(); //scrollbar position if( container.display &#61;&#61;&#61; 'inline' ){ $('html, body').animate({ scrollTop: $notice.offset().top - 100}, 500); } } if ( response.error &#61;&#61;&#61; 0 ){ if( response.redirect ){ //Redirect setTimeout(function(){ window.location &#61; response.redirect; }, xoo_el_localize.redirectDelay ); } else{ $form.hide(); } $form.trigger('reset'); if( formType &#61;&#61;&#61; 'resetpw' ){ $form.add( '.xoo-el-resetpw-hnotice' ).remove(); } } $( document.body ).trigger( 'xoo_el_form_submitted', [ response, $form, container ] ); } }) } } class Popup{ constructor( $popup ){ this.$popup &#61; $popup; this.eventHandlers(); this.initScrollbar(); } eventHandlers(){ this.$popup.on( 'click', '.xoo-el-close, .xoo-el-modal', this.closeOnClick.bind(this) ); $( document.body ).on( 'xoo_el_form_submitted', this.onFormSubmitSuccess.bind(this) ); this.$popup.on( 'click', '.xoo-el-action-btn', this.setScrollBarOnSubmit.bind(this) ); this.triggerPopupOnClick(); //Open popup using link } triggerPopupOnClick(){ $.each( formsTrigger, function( triggerClass, formType ){ $( document.body ).on( 'click', '.' &#43; triggerClass, function(e){ if( $(this).parents( '.xoo-el-form-container' ).length ) return true; //Let container class handle e.preventDefault(); e.stopImmediatePropagation(); popup.toggle('show'); if( $(this).attr( 'data-redirect' ) ){ popup.$popup.find('input[name&#61;&#34;xoo_el_redirect&#34;]').val( $(this).attr('data-redirect') ); } popup.$popup.find( '.'&#43;triggerClass ).trigger('click'); return false; }) }) } initScrollbar(){ this.$scrollbar &#61; Scrollbar.init( this.$popup.find('.xoo-el-srcont').get(0) ); } toggle( type ){ var $els &#61; this.$popup.add( 'body' ), activeClass &#61; 'xoo-el-popup-active'; if( type &#61;&#61;&#61; 'show' ){ $els.addClass(activeClass); } else if( type &#61;&#61;&#61; 'hide' ){ $els.removeClass(activeClass); } else{ $els.toggleClass(activeClass); } $(document.body).trigger( 'xoo_el_popup_toggled', [ type ] ); } closeOnClick(e){ var elClassList &#61; e.target.classList; if( elClassList.contains( 'xoo-el-close' ) || elClassList.contains('xoo-el-modal') ){ this.toggle('hide'); } } setScrollbarPosition( position ){ this.$scrollbar.scrollTop &#61; position || 0; } onFormSubmitSuccess( e, response, $form, container ){ this.setScrollbarPosition(); } setScrollBarOnSubmit(e){ var invalid_els &#61; $(e.currentTarget).closest('form').find('input:invalid'); if( invalid_els.length &#61;&#61;&#61; 0 ) return; this.setScrollbarPosition( invalid_els.filter(&#34;:first&#34;).closest('.xoo-aff-group').position().top ); } } class Form{ constructor( $form ){ this.$form &#61; $form; } eventHandlers(){ } } var popup &#61; null; //Popup if( $('.xoo-el-container').length ){ popup &#61; new Popup( $('.xoo-el-container') ); } //Auto open popup if( xoo_el_localize.autoOpenPopup &#61;&#61;&#61; 'yes' ){ setTimeout(function(){ popup.toggle('show'); }, xoo_el_localize.aoDelay); } $('.xoo-el-form-container').each(function( key, el ){ new Container( $(el) ); }) //Trigger popup if reset field is active if( $('form.xoo-el-form-resetpw').length ){ if( $('.xoo-el-form-inline').length ){ $([document.documentElement, document.body]).animate({ scrollTop: $(&#34;.xoo-el-form-inline&#34;).offset().top }, 500); } else{ if( popup ){ popup.toggle('show'); } } } if( $( 'body.woocommerce-checkout' ).length && $('.xoo-el-form-inline').length && $( 'a.showlogin' ).length ){ var $inlineForm &#61; $('.xoo-el-form-inline'); $inlineForm.hide(); $( document.body ).on( 'click', 'a.showlogin', function(){ $inlineForm.slideToggle(); $inlineForm.find('.xoo-el-login-tgr').trigger('click'); } ); } })

xml개발자 · Answer

class 입니다.익스에서는 안됩니다.class를 포기하던가, 익스를 포기해야합니다.

오후 · Answer

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99%98%EC%84%B1

컴포지트 · Answer

아래 중 하나 선택하시길.1. class 를 포기하고 function 과 prototype 으로 구성2. babel 사용3. IE는 지원하지 않습니다 명시

아마불편러 · Answer

1. es5 문법으로 변경2. babel 적용 두가지 중 하나 고르세요. 결과물은 비슷합니다

jaguarb612 · Answer

으아..그렇군요.. 갑갑하네요 ㅎㅎㅎ

jaguarb612 · Answer

다들 감사합니다. 이거하나 고치면 저게 터지고 그러네요 ㅎㅎㅎ

defult · Answer

IE의 기능지원은 2013초반 기준으로 끝이라고 보면 되므로IE지원 생각한다면 모든것은 요즘 사용하는 기술 수준이 아니고 2013년 이전 기술 베이스를 생각하셔야합니다

jaguarb612 · Answer

저도 그래서 다 크롬 기준으로 만들었는데, 나이 드신 분들이 고객으로 들어오면서 문제가 발생하네요 ㅎㅎㅎ

jaguarb612 · Answer

ES 5로 변경해서 적용 했습니다.감사합니다!!!

[IE에서만 화면이 안떠요] SCRIPT1002: 구문오류

9개의 답변

Q&A 목록