javascript div 마스크 레이어는 전체 page_javascript 기술을 차단합니다.-JS 튜토리얼-php.cn

javascript div 마스크 레이어는 전체 page_javascript 기술을 차단합니다.

WBOY

풀어 주다： 2016-05-16 18:50:16

원래의

1674명이 탐색했습니다.

구체적인 해결 방법은 다음과 같습니다.
1. IE 및 FF에서 document.body 개체의 clientHeight, offsetHeight 및 scrollHeight 속성의 차이점.
clientHeight
IE와 FF에서 이 속성은 둘 다 브라우저의 가시 영역, 즉 클라이언트를 제외한 나머지 페이지 표시 공간의 높이를 나타냅니다. 브라우저의 도구 모음 상태 표시줄.
offsetHeight
IE에서 offsetHeight는 브라우저의 가시 영역(가장자리 포함)의 높이이기도 합니다.
FF에서 offsetHeight는 IE에서
scrollHeight
페이지의 특정 콘텐츠 높이입니다. , scrollHeight 페이지의 특정 콘텐츠의 높이이며 clientHeight
FF에서 scrollHeight는 웹 페이지 콘텐츠의 높이이지만 최소값은 clientHeight
2입니다. 다음은 현재 페이지의 높이를 얻는 크로스 브라우저 솔루션입니다.

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

function getPageSize() 
{ 
var body = document.documentElement; 
var bodyOffsetWidth = 0; 
var bodyScrollHeight = 0; [0, 0]; 
pageDimensions[0]=body.clientHeight; 
bodyOffsetWidth=body.offsetWidth; 
bodyScrollWidth= body.scrollWidth; 
bodyScrollHeight=body.scrollHeight; 
if(bodyOffsetHeight > pageDimensions[0]) 
{ 
pageDimensions[0]=bodyOffsetHeight; if(bodyOffsetWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyOffsetWidth; 
} 
if(bodyScrollHeight > pageDimensions[0]) 
{ 
pageDimensions[ 0]= bodyScrollHeight; 
} 
if(bodyScrollWidth > pageDimensions[1]) 
{ 
pageDimensions[1]=bodyScrollWidth; 
return pageDimensions; 
 


3. div는 마스크 레이어로 페이지에 배치되어야 합니다. 다음은 이 마스크 레이어의 CSS 스타일입니다. 
 




코드 복사

코드는 다음과 같습니다.

.lockDiv { 위치:절대; 왼쪽:0; 높이:0 경계:2 빨간색; ; 텍스트 정렬:센터;

배경색:#DBDBDB;

필터:알파(불투명도=60) 
} 

 4. 클라이언트에서 아래 자바스크립트를 사용하여 전체 페이지를 마스크 레이어로 묶습니다. 
 
코드 복사 

 코드는 다음과 같습니다.

var sandglassSpan = 1; 🎜>var timeHdl; function DisablePage() {
var ctrlSandglass = document.getElementById("divSandglass")

if(sandglassSpan==0) { window. clearTimeout(timeHdl); ctrlSandglass.style.display = "none"; document.body.style.cursor = 'auto' sandglassSpan = 1 }else

{

document.body.style.cursor = '대기'; 
var pageDimensions = getPageSize() 
ctrlSandglass.style.top = 0 
ctrlSandglass.style.left; 🎜>ctrlSandglass .style.height = pageDimensions[0]; 
ctrlSandglass.style.width = pageDimensions[1]; 
ctrlSandglass.style.display = "block" 
timeHdl = window.setTimeout(DisablePage ,200) ; 
} 
} 

5. 페이지에서 ASP.net Validator 컨트롤을 사용하는 경우 다음 자바스크립트를 사용해야 합니다. 
 
코드 복사 

 코드는 다음과 같습니다. 

var sandglassSpan = 1; 🎜>var timeHdl; 
function 비활성화PageHaveValidator()

{
var ctrlSandglass = document.getElementById("divSandglass") if(false == Page_IsValid) {
sandglassSpan = 0;

} if(sandglassSpan==0) { window.clearTimeout(timeHdl) ctrlSandglass.style.display = document.body. style.cursor = 'auto'; sandglassSpan = 1;

}

else 
{ 
document.body.style.cursor = '대기' 
ctrlSandglass.style.display = "블록"; 
var pageDimensions = getPageSize(); 
ctrlSandglass.style.top = 0; 
ctrlSandglass.style.height = pageDimensions[0] ; 
ctrlSandglass.style.width = pageDimensions[1]; 
timeHdl = window.setTimeout(DisablePageHaveValidator, 200) 
} 
} 


6. 비활성화PageHaveValidator 이 메서드는 버튼의 onclick 이벤트나 다른 시간에 호출될 수 있습니다.