ajax 호출에서 미디어 쿼리에 응답

브라우저로 크기 조정 이벤트를 수신하려고 시도 중이고 < 48 임계 값을 초과하면 서버에 "xs"=> 매우 작은 요청 헤더를 보냅니다. 반대로,> 48 REM은 "SM"를 보내드립니다은 작은 ajax 호출에서 미디어 쿼리에 응답

지금까지이 함께했다> = -

if (matchMedia) { 
    var mq = window.matchMedia("(max-width: 48rem)"); 
    mq.addListener(WidthChange); 
    WidthChange(mq); 
} 

// media query change 
function WidthChange(mq) { 
    if (mq.matches) { 
    // window width is less than 48rem 
    (function(send) { 
     XMLHttpRequest.prototype.send = function(data) { 
      // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent 
      this.setRequestHeader('x-size-token', ' '); 
      this.setRequestHeader('x-size-token', "xs"); 
      send.call(this, data); 
     }; 
    })(XMLHttpRequest.prototype.send); 
    } else { 
    // window width is at least 48rem 
    (function(send) { 
     XMLHttpRequest.prototype.send = function(data) { 
      // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent 
      this.setRequestHeader('x-size-token', ' '); 
      this.setRequestHeader('x-size-token', "sm"); 
      send.call(this, data); 
     }; 
    })(XMLHttpRequest.prototype.send); 
    } 

}

이 이런 식으로 헤더를 요청하는 추가된다

sm 
xs,sm 
sm,xs,sm

그래서 기본적으로 오래된 것을 쓰지 않고 대신에 추가하는 것처럼 보입니다.

requestHeader에는 xs/sm 중 하나만 사용됩니다.

편집 :

각의 크기를 조정 이벤트를 다시로드 몇 가지 제안에 따라, 그것은 반드시 작동하지만 손실 될 수 있습니다 상태의 많은이 각의 크기를 조정 이벤트를 다시로드 할 수 없습니다 : 나를 위해 일하게 될 것으로 보인다 무엇

$(window).on('resize',function(){location.reload();});

출처

2016-07-28 fortm

: 바닐라 JS에서 헤더, 나는 나를 위해 헤더를 설정하는 JQuery와 ajaxSetup를 이용하고 크기를 조정하면서 지금은 다시로드하지 않고도 찾아 다음 아약스 요청으로 이전에 추가하지 않고 정확한 값을 취 너를 도울 것이다. –

현재 웹 사이트는 방향 변경이있을 때만 강제로 다시로드합니다. 다른 방법이라도? – fortm

페이지를 새로 고침하면 Google에서 크기를 조정할 수 있습니다. –

은 다음과 같습니다 :

function WidthChange(mq) { 
     if (mq.matches) { 
     // window width is less than 48rem 
     $.ajaxSetup({ 
      headers : { 
       "x-size-token" : "xs" 
      } 
     }); 
     } else { 
     // window width is at least 48rem 
     $.ajaxSetup({ 
      headers : { 
       "x-size-token" : "sm" 
      } 
     }); 
     } 
    }

그래서 대신 아약스 호출 및 설정 요청을 차단 페이지를 다시로드 크기 조정에

xs 
sm 
xs

출처

2016-07-28 09:02:08 fortm

ajax 호출에서 미디어 쿼리에 응답

답변

관련 문제