웹 페이지의 특정 요소를 샌드 박싱하는 방법은 무엇입니까?

Question

내 웹 페이지에이 점이 있습니다 ... 위젯이라고 할 수 있습니다 ...

포함 된 페이지의 CSS와 JS에서 CSS와 JS를 어떻게 구분합니까? 바람직하게 iframe을 사용하지 않고?

내 앱에서는 사용자가 콘텐츠의 CSS를 맞춤 설정할 수 있으므로 깨끗한 슬레이트가 필요합니다.

Answer 1

위젯의 가장 바깥 쪽 요소에는 상대적으로 고유 한 클래스 이름을 설정하십시오. 예 :

<div class="my_spiffy_widget"> 
    <!-- Insert spiffy widget here --> 
</div> 

자바 스크립트와 CSS를 고유 한 파일에 넣으십시오.

.my_spiffy_widget P { /* paragraph rules */ } 
.my_spiffy_widget A { /* anchor rules */ } 
.my_spiffy_widget UL { /* unordered list rules */ } 

규칙이 실수로 다른 CSS 규칙에 의해 무시되지 않는 보장이 같은 CSS, 구조하여 선택기의 모든하십시오. 가능하면

function my_spiffy_widget_doSomething() {...} 

전역 변수를 피하지만,뿐만 아니라 그들 앞에 수없는 경우 : 자바 스크립트와 마찬가지로

는 공통의 독특한 접두사와 기능을 앞에

var my_spiffy_widget_firstTime = true; 

Answer 2

당신을 ! important 선언을 속성에 추가 할 수 있으므로 사용자가 설정을 재정의하는 것이 더 어려워집니다.

예 :

div.widget #header { 
    padding-left: 10px !important; 
    padding-right: 5px !important; 
} 

그리고/또는 (예 : 에릭 마이어의 등) CSS 리셋 스크립트를 잡아와 컨테이너 DIV의 이름으로 각각 선택 서문 할 수있다.

Answer 3

매우 복잡한 CSS 클래스 이름 외부의 모든 요소를 ​​제공하고 사용자가 선택할 요소 (예 : "KAFHxyz _...")와 충돌하지 않도록 할 수 있습니다. 이렇게하면 모든 정상 클래스 이름과 기본 스타일은 "위젯"에만 적용됩니다.

이는 "몸 {글꼴 ...}"말할 수 !important (그래서 사용자를 사용하여 모든 표준 CSS 스타일을 설정해야하기 때문에 어떤 노력 할 것이며, 그것은 단지 자신의 영역에 적용됩니다.

또는 모든 요소의 모든 스타일을 가져 오는 일부 자바 스크립트를 작성한 다음 "위젯"(및 JS/CSS)을 추가 한 다음 이전 스타일로 모든 스타일을 재설정 할 수도 있습니다. 그렇다면, iframe을 자바 스크립트로 만들고 콘텐츠 (DOM 내부)를 마음 속의 콘텐츠로 조작 할 수 있다는 것을 알고 있습니까? 그렇다면이 시나리오에서는 IF rame은 CSS와 JS 파일에 "네임 스페이스"를 추가하는 Div와 같은 요소 일뿐입니다.