복붙노트

[JQUERY] 나는 요청에 외부 스타일 시트를로드 할 수 있습니까?

JQUERY

나는 요청에 외부 스타일 시트를로드 할 수 있습니까?

해결법


  1. 1.그래 : 당신이 스타일 시트에 연결하는 <링크> 태그를 생성하고이의 태그에 추가하는 경우, 브라우저는 스타일 시트를로드합니다.

    그래 : 당신이 스타일 시트에 연결하는 <링크> 태그를 생성하고이의 태그에 추가하는 경우, 브라우저는 스타일 시트를로드합니다.

    EG

    $('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
    

    이것은 IE 8 또는 아래 작업을하지 않는 @ peteorpeter의 코멘트를하지만, -이, 당신도 할 필요가 :

    또한, 이미 추가 된 링크가 모든 브라우저에서 안정적으로 작동하지 않습니다 여부를 검사합니다.

    나는 또한 당신의 전제의 일부를 질문합니다 :

    왜? 페이지 무게를 줄이기 위해? 나는 욕망을 이해할 수있다, 그러나 당신은 감소 가치가 있는지 여부를 확인 할 수없이 거기에 라이트 코드 (축약 및 Gzip으로 압축 후) 귀하의 CSS와 JS 파일의 크기를 측정하고해야합니다 :

    축소를하고 Gzip으로 압축 한 후, 물론 그 정도 차이가있을 수 없습니다.

    그리고 명심 당신은 만 다운로드됩니다 의미, 오랜 시간 동안 당신의 CSS와 JS를 캐시하도록 브라우저를 지시 할 수있는 경우 사용자가 방문하는 빈 캐시 사이트.


  2. 2.

    $('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
    

  3. 3.당신은 할 수 있습니다 :

    당신은 할 수 있습니다 :

    $('<link>').attr('rel','stylesheet')
      .attr('type','text/css')
      .attr('href','link_to.css')
      .appendTo('head');
    

  4. 4.당신은 단순히 머리에 동적 HTML 콘텐츠를 추가하여 외부 스타일 시트에 대한 참조를 추가 할 수 있습니다 :

    당신은 단순히 머리에 동적 HTML 콘텐츠를 추가하여 외부 스타일 시트에 대한 참조를 추가 할 수 있습니다 :

    $('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
    

    이 콘텐츠는 DOM에 삽입하고,이어서 외부 스타일 시트 페치 원인이 경우, 일반적으로 렌더링 얻는다.

    당신이 정적 콘텐츠의 동적 로딩에주의하지 않으면으로 잘 그러나 같은 클리 터스 '대답에주의는, 그것은 페이지로드 시간과 과도한 자원 전송에서 당신을 원가 계산 종료 할 수 있습니다.


  5. 5.일반적으로 당신은 더 나은 오프 당신은 당신이 이렇게 제대로하고있는 가정을 모두 필요 포함하고 있습니다.

    일반적으로 당신은 더 나은 오프 당신은 당신이 이렇게 제대로하고있는 가정을 모두 필요 포함하고 있습니다.

    그함으로써 나는이다 정적 콘텐츠 (이미지, 자바 스크립트, CSS)에 대한 그 최선의 방법을 의미한다 :

    사용자는 오직이 변경 될 때까지 한 번 주어진 파일을 다운로드 할 수 있도록.

    그것은 매우 큰 경우를 제외하고 동적 로딩 CSS와 자바 스크립트, 일반적으로 부당하고 비생산적이다.


  6. 6.IE의 문제 ...

    IE의 문제 ...

    나는 함께 IE 6,7,8 충돌했다

    $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );
    

    다만, 짜잔을 다른 HTTP의 REQ를 방지하기 위해 주요 시트로 복사.


  7. 7.우리가 직접 추가 할 수 있습니다

    우리가 직접 추가 할 수 있습니다

    $("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
    
  8. from https://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request by cc-by-sa and MIT license