jquery로 CSS 파일 추가

jquery로 CSS 파일 추가

---

나는 popupwindow를 만들고 있는데 아래의 popupwindow에 css 파일을 추가하고 싶습니다. 팝업 창을 만드는 자바 스크립트가 있습니다.

<a href="popupwindowcontent.xhtml" title="Print" class="popupwindow">Print1</a>

이제이 팝업창에 CSS 파일을 추가하고 싶습니다. 나는 같은 것을 시도했다

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


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

하지만 작동하지 않습니다.

감사

---

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

작동합니다.

---

이것이 jQuery ajax를 사용하여 CSS를 추가하는 방법입니다. 누군가에게 도움이되기를 ..

$.ajax({
            url:"site/test/style.css",
            success:function(data){
                 $("<style></style>").appendTo("head").html(data);
            }
        })

---

    var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
    });
    css_link.appendTo('head');

---

내 몇 센트 만 ... 때로는 중복이 없는지 확인하는 것이 좋습니다 ... 그래서 우리는 utils 라이브러리에 다음 함수를 가지고 있습니다.

jQuery.loadCSS = function(url) {
    if (!$('link[href="' + url + '"]').length)
        $('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}

사용하는 방법:

$.loadCSS('css/style2.css');

---

문제는 선택기가 앵커 요소에 대한 것 <a>입니다. <a>태그가 사례가 아닌 페이지를 나타내는 것처럼 취급하고 있습니다.

$('head') 이 선택기가 CSS가 필요한 페이지에서 실행되는 한 작동합니다.

문제의 페이지에 CSS 파일을 추가하지 않는 이유는 무엇입니까? 다른 페이지에서이를 동적으로 시도하는 특별한 이유가 있습니까? 나는 이와 같이 원격 페이지에 CSS를 삽입하는 방법에 익숙하지도 않습니다 ... 그것은 주요 보안 구멍이 될 것 같습니다.

추론에 대한 부록 :

그런 다음 매개 변수를 페이지에 전달하고 javascript를 사용하여 읽은 다음 매개 변수에 따라 필요한 모든 작업을 수행해야합니다.

---

다른 방법으로 시도하십시오.

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

---

인스 턴싱중인 창에 첨부 할 수 없다고 생각합니다 ... URL이 다른 도메인 (XSS 및 모든 재즈)에 있으면 할 수 없지만 해당 창에서 UP으로 말할 수 있습니다. 동일한 도메인에 있다고 가정하고 부모 창의 요소에 액세스합니다. 가장 좋은 방법은로드중인 페이지에 스타일 시트를 첨부하는 것입니다. 해당 페이지가 동일한 도메인에 있지 않으면 (예 : 다른 페이지의 스타일을 변경하려는 경우) 불가능합니다.

---

CSS 참조를 위해 단순히 미디어 속성을 사용해 보셨습니까?

<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />

또는 인쇄 된 버전에서 스타일을 사용하지 않으려면 화면으로 설정하십시오.

<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />

이렇게하면 동적으로 추가 할 필요가 없습니다.

참조 URL : https://stackoverflow.com/questions/5680657/adding-css-file-with-jquery