>  기사  >  웹 프론트엔드  >  이미지 경로를 동적으로 로드하고 JavaScript Controls_javascript 기술의 상대적 독립성을 유지합니다.

이미지 경로를 동적으로 로드하고 JavaScript Controls_javascript 기술의 상대적 독립성을 유지합니다.

WBOY
WBOY원래의
2016-05-16 18:20:25926검색

당시 고려한 방법은 세 가지였습니다.
1. js 파일에 직접 경로를 작성하는데, 참고 페이지의 경로 수준이 바뀌면 해결 방법이 없습니다.
2. 클래스를 작성하여 테마 패키지의 CSS 파일에 넣거나 날짜 제어용으로 별도의 CSS 파일을 만듭니다. 하지만 컨트롤의 다른 요소에 대해서는 클래스를 사용할 필요가 없으며 해당 CSS 문서를 별도로 만드는 것은 큰 일인 것 같습니다.
3. 위의 두 가지 방법을 제외하고, 이미지 경로를 동적으로 로딩하는 방법을 사용하는 것이 당연합니다.
키 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//전역 변수 저장 경로 생성
var imgRootUrl = "";

//이미지 경로가 있는 디렉터리 가져오기
var strPath=window.document.location.pathname; /호스트 주소 뒤의 디렉터리 부분 가져오기
var thisUrlCount = strPath.split('/')
var HierarchyOfFolders = thisUrlCount.length-2;//디렉터리 계층 가져오기
for(iRoot=0 ;iRoot{
imgRootUrl ="../";
}
imgRootUrl ="Images/"; //이 이미지는 실제로 매개변수로 설정될 수 있습니다. 모든 프로젝트 이미지 폴더의 이름은 고정되어 있으며 매개변수 설정은 없지만 여전히 저장 확장성을 유지합니다.

이미지를 추가한 후 제어 효과가 상당히 아름답습니다.
이미지 경로를 동적으로 로드하고 JavaScript Controls_javascript 기술의 상대적 독립성을 유지합니다.
그런데 window.document.location의 모든 속성을 첨부합니다.
document. location.hash // # VS window.location.hash
document.location.host // 도메인 이름 포트 번호
document.location.hostname // 도메인 이름
document.location.href / / 전체 URL
document.location.pathname // 디렉토리 부분(애플리케이션)
document.location.port // 포트 번호
document.location.protocol // 네트워크 프로토콜(http:)
document .location.search // ? 다음 부분
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.