IT를 표현

자바 스크립트의 조각은 일반 바 IE 등 모든 브라우저 ANS에서 괜찮았는데이 이상한 문제를 가지고있다 간단한 ... 그것은했지만 스크립트가 나를에 의해 쓰여진 아니었기 때문에, 그것은 오직 IE가 던지는 것을이 "개체가이 속성 또는 메서드를 지원하지 않습니다"오류를 디버깅하는 데 시간이 좀 걸렸어요. 아마! 전 스크립트를 작성했다면 필드 ID를 :)으로 내 변수 이름을 섞어 않는 한, 나는 전혀이 오류를 못했을거야.

문제 : 개체 (라인 3)이 속성 또는 메서드를 지원하지 않습니다

function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

해결 방법 :
오류는 위의 예제 (3 행 ... "shortdesc = document.getE ....")에 thirdrow에서 생성됩니다. 난 여기서 언급의 가치가있다 나는하지 말아 바보 같은 것들의 모든 종류를 시도하고 마침내 맞춰봐! 그냥 다른 뭔가로 shortdesc의 VAR을 변경하면 오류를 지웠어. 기본적으로! 변수 이름은 fieldID과 다를 수 밖에

이 사람의 오래된 학교,하지만 평소처럼 그것은 내 기억 보충은 ...
그래서 = "진정한"와 비활성화 = "false"를 동일한 비활성화되어 있습니다? 예
음, 믿지 마세요! 있는 그대로 멋지다 ... 여기 몇 가지 간단한 설명입니다 ...
"비활성화"폼 요소 / 필드의 모든 속성이며 자연에 어떤 가치를 받아들일 수있다 따라서.

언제 까지나이 속성이 존재하므로, 요소는 그 가치에 관계없이 비활성화됩니다. 예입니다.
<input type="text" value="This는 disabled" disabled>입니다
<input type="text" value="This는 disabled" disabled="disabled">입니다
<input type="text" value="This는 disabled" disabled="true">입니다
<input type="text" value="This는 disabled" disabled="false">입니다

위의 모든이 양식 필드가 "사용 안 함"할 것입니다.

간단하게 속성을 지원하지 못하고있는 것은 "사용 안 함"필드 "ABLED"자꾸 아래와 같은

<input type="text" value="This는 disabled" 없습니다 />

기억하기 "장애인 속성의 모든 값이 (또는 전혀 값), 브라우저는 비활성화 렌더링됩니다." 우리 마음의 W3C의 일을 확실하게 유지하려면 우리가이 상황에서 비활성화 = "장애"를 사용하는 것이 좋습니다.

우리가 자바 스크립트에서이 속성을 사용할 때 비록 차이는 ...

document.form.element.disabled = 진정한; / / 요소가 비활성화됩니다
document.form.element.disabled은 = false를; / / 요소가 활성화됩니다

위의 주장은 이러한 속성 및 요소 또한 사실입니다

• 선택 (라디오 버튼과 체크 박스)
• 선택 (옵션)
• 넘김 (TD)

나는 상황이 그것을 commaned 때문에 주위에 파고한다고 자바 스크립트 속임수의 또 다른 작은 peice를 Heres. 나는 두 번 "windows.onload"를 구현하는 한 곳에서 내 웹 사이트 중 하나에서, 나는이 상황을했다. 나처럼 미숙한 마음 (솔직히 내가 자바 스크립트 프레임 워크와 라이브러리를 사용하고 난 이후로 내 ... 슬프지만 진실에 간단한 일을 forgotton 있고, 말을해야 할)에 와서 제일 먼저 다음과 같은 방법입니다 ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 등 ...

미안하다고 말하고 있지만, 효과가 실거예요 ... 자바 스크립트의 실행 정도 과학을 논의하기 위해 싶지 않아요 ... 그러나 나의 최근 경험에 의하면, 오직 마지막 함수는 (onloadfn3) 병이 실제로 처형 당할 것입니다.

정상적인 상황에서는, 제 (잠시 후에 다시 얘기하자있는)와는 달리 당신은 mutliple onload 함수를 실행하기 위해 다음 중 하나를 할 수있다 ....

이런 사람 이었을까

 함수 doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

현재 상황의 경우, 위의 중 하나를 사용할 수 없습니다 ...
왜 windows.onload 두 번 호출하지 않고 하나의 onload 함수 내에 두 개의 함수를 호출하는 데 필요 했을까? 이게 제 문제 명세서에서 빠른 모습은 ...

"내 사이트 페이지는 워드 프레스 테마처럼 구성되어있다 .... 즉 모든 사이트 페이지에 포함된 받게 일반 Header.php과 Footer.php 있습니다. 몇 가지 일반적인 onload 기능을 할 Footer.php에서 onload 함수 implementaion가있다. 과 별개 일반 onload 함수에 의해 수행으로부터 자신 ONLOAD의 무언가를 위해 필요한 몇 페이지가 마련되어 있습니다. 제가 window.onload 처리기에 직접 콜백 함수를 지정할 경우 "Footer.php에 이전에 할당된 콜백을 과잉 향할 것이다

.... 내 문제는 이해된다 ?

글쎄! 내가 찾아낸 것이 몇 가지 해결책이 있습니다. 그들은 모두 매우 유사하며 주로 사이먼 Willison (준 솔루션의 implementions http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

해결 방법 :

간단히 사이트로이 자바 스크립트 코드를 추가 ...

 함수 addLoadEvent (FUNC) {
     VAR oldonload = window.onload;
     IF (typeof의 window.onload! = '함수') {
        window.onload = FUNC
     } 또 {
        window.onload = 함수 () {
            {(oldonload) 경우
                   oldonload ()
           }
           FUNC ()
        }
    }
 }

대신 평소 'windows.onload "의 그것을 호출

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (함수 () {
 페이지로드 *에서 실행하기 / * 더 많은 코드를
 }); 

이 코드 스니펫 (snippet)의 장점 ...
1. 주로, 그것은 이전 정의를 overridding없이 코드의 별도 부분에서 호출, 당신은 여러 windows.onload 이벤트를 가지고 있습니다
2. 정말 눈에 거슬리지입니다. 그것은 다른 스크립트 파일에 또는 별도의 파일에 배치될 수 있습니다.
3. 그것은 window.onload가 이미 설정된 경우에도 작동합니다.

때로 pageweight을 지키기 위해 우리는 파편으로 우리의 스크립트를 분할했습니다 ... 필요할 때 이러한 자바 스크립트 조각과 같이로드하실 수 있습니다 (이벤트 또는 기타 링크 또는 단추를 클릭합니다).

로드 Javascripts 동적으로 간단하고 아주 똑바로 앞으로 아래와 같습니다 ...

= “text/javascript” > <스크립트 유형 = "텍스트 / 자바 스크립트">
함수 loadNewScript (소스) {
VAR S = document.createElement ( '스크립트');
s.setAttribute ( '유형', '텍스트 / 자바 스크립트');
s.setAttribute ( 'SRC', 소스);
document.body.appendChild (들);
}
</ SCRIPT>

그리고 당신은 어디서나 본문에 다음 호출 링크를하거나 문서 자체의 스크립트 "onLoad"를 가질 수 ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > 해서 <a href = "자바 스크립트 : loadNewScript ( 'myDynamicScript.js');"> 하중 동적 스크립트 </ a>

또는

<body onload="loadNewScript('myDynamicScript.js');">

단 몇 라이트 박스의 때 Google은 당신이 찾아내는 수있다 않지만. 내가 찾은 lightboxes 대부분 가진 문제는 그들이 모두 하나 이상 JQUERY, 프로토 타입, MOOTOOLS 그리고 저자와 같은 다른 중량 자바 스크립트 프레임 워크를 사용하는 것 같았다는 것이었습니다. 그들은 모두 근사하고 멋진 찾고 있습니다. 당신의 요구는 "하지만 내가 내 사이트에 대한 간단하고 가벼운 라이트 박스 스크립트 싶다"라면, 그럼 여기 있네요;

이 라이트 박스의 일부 멋진 기능

1. 매우 가벼운
   . 포장 스크립트 4킬로바이트 (8킬로바이트은 풀었)
   나. CSS의 2킬로바이트
   다. 라이트 박스 컨테이너를위한 HTML의 몇 줄
2. 이해하고 구현할 단순
3. 같은 페이지에 여러 Lightboxes 수 있습니다.
4. 같은 라이트 박스 컨테이너는 클릭할 링크 / 옵션에 따라 다양한 컨텐츠를 (별도 페이지에 숨겨진 사업부로 포함되는), 표시하는 데 사용됩니다.
5. 자동으로 고려와 같은 윈도우의 높이와 넓이 (화면 해상도), 페이지 스크롤 금액 및 라이트 박스 내용의 높이가 같은 모든 요인을 복용 자체 되잖아
6. IE 7과 FF에서 테스트

데모보기 |
다운 라이트 박스 소스 우편 (1801 회 다운로드)

jo.js, jo_pack.js [포장 버전] : - JAVASCRIPT 객체의 간단한 세트 [조], 요소, 창 및 문서 위치 스크립트가 포함되어 있습니다. 당신은 추상 함수를 작성하는 일부 고급 Javascripting와 당신의 손을 더럽히는하려는 경우 요소 속성과 같은 확대 JO.JS를 열 수 있습니다. Javascripting의 당신이 너무 많이하지 않으면 냅둬.

lightbox.js, lightbox_pack.js [팩킹된 버전] : - 라이트 박스 관리자가 스크립트를 포함합니다. 당신이 페이지에서 라이트 박스를 구현에도 책임이 페이지 디자이너, 경우 LightBoxManager를 이해해야합니다. LightBoxManager은 기본적으로 두 함수 showLightBox 및 closeLightBox가 포함되어 있습니다.

lightbox.css : - 당신이 CSS를 알고있다면, 당신이 모양-N-느낌 lightbox.css을 사용자 지정하는 lightbox.css와 주변 놀 수

index.html 페이지 : 두 개의 다른 콘텐츠로 라이트 박스의 샘플 구현

lb_underlay_bkg.png : - [라이트 박스가 열려있는 동안, 밑받침이 페이지의 다른 개체를 클릭으로부터 사용자를 방지 lighbox 아래 레이어입니다] 이것이 라이트 박스의 밑받침에 대한 배경을 사용하는 시미 / 빛이 투명 이미지입니다. 당신은 페이지 디자인 및 요구 사항에 따라이 목적도 어떤 이미지나 단색을 사용할 수 있습니다.

icon_lb_close.gif : - 빛의 상자의 오른쪽 상단에있는 가까운 라이트 박스 핸들에 대한 이미지입니다. 디자인에 따라 어떤 이미지를 사용할 수

데모보기 |
다운 라이트 박스 소스 우편 (1801 회 다운로드)

귀하의 의견과 피드백을 해주세요 ...

음, 과학 등 usefull 장도없고 말을해야하지만 웹 개발자면, (또는겠나?) 언젠가 쓸모가 올 수도 있습니다. 여기 사이트에 대해 웹 페이지를 편집할 수 있도록 작은 북마크입니다.
그리고 죄송합니다! 당신은 단지 로컬 컴퓨터에 결과를 저장할 수 있습니다.

자바 스크립트 : document.body.contentEditable = '진정한'; document.designMode = '에 대한'; 무효 0

많은 우리가 브라우저 specfic 해킹을 작성 할 필요가 느껴 번 (를 좋은 연습 아니지만, 우리 UI 개발자들은 훌륭한 브라우저 전쟁까지 이러한 악에 의지해야이 휴전에 온다). 아까,이 문서에서 언급했다 만이 이거야 내용은 방법만이 <IE7 IE 브라우저 볼 것입 CSS 스니펫 (snippet)을 작성.

어제, 제가 몇 가지 파이어 폭스 특정 CSS를 미리보기를 쓰고 싶다 사건을했다. 글쎄! 제가 CSS 코드는이 목적이 있는지 잘 모르겠지만, HTML이있다. 사면에도 불구하고 있습니까, HTML doesnot 패스 HTML 유효성 검사의이 조각. 그러나 anywaz! 당신이 나쁘게 나 같은 붙어있다면, 검증에 대한 - 안부 (언젠가는 우리가 잔인한 될 필요)가 없다, 당신은 Firefox 용 스타일 시트에 대한 링크를 선언하려면 다음을 사용하거나 심지어는 그냥이 블록 내에서 CSS를 코딩 수 있습니다. 코드는 다음과 같습니다

<comment> 여기에만 파이어 폭스 HTML / CSS / 스크립트 </ 코멘트> 올려

예
<comment>
<style>
FF에만 * / 용 / * 스타일
fieldset {국경 : 1px 고체 # dddddd;}
</ 스타일>
</ 코멘트>

나는 '순간 행복해 ...

다음은 그 정의를 위해, 기본 자바 스크립트 배열 개체를 확장하는 빠른 방법은 ...

Array.prototype. removeItem =function(str) {
for(i=0; i<this.length ; i++){
if(escape(this[i]).match(escape(str.trim()))){
this.splice(i, 1); break;
}
}
return this;
}


그래서 지금 이런식으로 뭔가를 할 수 ...

var animals= new Array("dog","lion","cat","tiger","elephant");
animals. removeItem ('tiger');

이제 동물 배열은 "사자", "고양이", "코끼리"를 "개"를 포함하는 것이다;

추신 : 여기 그리고 너무 문자열 트림 프로토 타입입니다 ...

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

즐겨 ....

JavaScript의 HTML 문서의 맨 아래에 포함

여러분의 스크립트에서 페이지의 내용의 일부를 삽입하는 document.write를 (또는 javascripts를 사용하여 페이지의 내용 중 동적 생성)이 없으면 BODY 태그의 끝 이전에 페이지 하단에 구문을 포함 스크립트를 이동합니다.
HTTP/1.1 사양은 그 브라우저는 호스트마다 병렬로 더 이상 둘을 제외 구성 요소를 다운로드하여 제안합니다. 가 여러 호스트에서 이미지를 제공하는 경우 병렬로 발생하는 두 개 이상의 다운로드를받을 수 있습니다. 스크립트가 다운로드되는 동안 그러나 브라우저도 다른 호스트에서 다른 다운로드를 시작하지 않습니다.
동적으로 스크립트 노드를 생성하고 페이지가 AJAX를 사용하여 로드된 후 원격 스크립트를 로드할 수있는 방법도 있습니다.

당신에게 JavaScript의를 Externalise

자바 스크립트 파일이 브라우저에 의해 캐시 때문에 외부 자바 스크립트 파일을 사용하면 페이지의 빠른 로딩을 초래할 것입니다. 인라인 자바 스크립트의 'HTML 문서에서이 HTML 문서를 요청 때마다 다운로드 하죠. 이것은 실제로 만들어진 HTTP 요청의 개수를 줄일 수 있지만 이후 HTML 문서의 크기를 증가시킵니다. 외부 자바 스크립트가 브라우저에 의해 캐시, HTML 문서의 크기는 HTTP 요청의 수를 증가하지 않고 줄어 듭니다.
귀하의 사이트에 사용자 세션 당 여러 페이지뷰를 가지고 귀하의 페이지에 다시 사용 동일한 스크립트와 스타일 시트의 많은 경우, 캐시된 외부 파일에서 큰 잠재적 이익이된다는 점에 유의해주십시오.

당신의 자바 스크립트 파일을 싸

JavaScripts 경우에는 CSS 달리 파일은 단순히 공백이나 탭을 제거보다 줄어든 파일 크기를 줄 겁니다 일부 표준 알고리즘을 사용하여 났구요 수 있습니다. 자바 스크립트 패커의 예제는 여기 http://dean.edwards.name/packer/ 찾을 수 있습니다

중복 스크립트를 제거 해

그것은 전체 스크립트가 중복 수도 것은 매우 이례이지만, 10 위로 미국 웹 사이트의 평가는 그 중 두 중복 스크립트가 포함되어있다는 사실을 보여줍니다. 스크립트를 중복지만 분명 불필요한 HTTP 요청과 낭비 자바 스크립트 실행을 생성하여 성능을 줄여줍니다.
스크립트 이름은 다르지만 또한 많은 경우, 스크립트 팀 크기와 개수에 따라 동일한 페이지 내에서 중복되는 스크립트의 가능성이 있습니다.

가능한 DOM 요소에 액세스 최소화

자바 스크립트로 DOM 요소에 액세스하는 것은, 당신이해야 더 반응 페이지 권한을 부여하기 위해 너무 느립니다 :
액세스한 요소 • 캐시 참조
트리에 추가 후 • 업데이트 노드 "오프라인"및
• 자바 스크립트로 레이아웃을 고정 피한다

콘텐츠 및 프레 젠 테이션에서 별도 행동

우리 콘텐츠 (XHTML / XML)에서 별도의 프레 젠 테이션 (CSS / XSLT), 우리도 행동을 분리해야 것처럼 (자바 스크립트). 이것은 겸손한 자바 스크립트 호출됩니다. 우리가 외부 CSS 파일에 연결 것처럼, 우리는 외부 자바 스크립트 파일에 연결해야합니다.

대신 콘텐츠 (예 : onmouseover, onclick 등)로 하드 코딩 문제로 인해 문제는 동적 요소, 클래스, 그리고 DOM을 사용하여 고유한 요소 (IDS)에 추가되어 있어야합니다. 기초 문서, 콘텐츠만이 유효한 XHTML / XML없이 자바 스크립트가 포함되어야합니다.
자바 스크립트가 동작을 추가하여 콘텐츠를 확대한다. 내용이 유용하고 자바 스크립트 (또는 전체 자바 스크립트를 지원하지 않고)없이 사용할 유지됩니다.

여러 행사에서 팝업 부서 / lightboxes / 팁과 페이지 레이아웃을하고있는 동안은 우리는 몇 가지 양식 SELECT 객체 설계에 의해,이 팝업 사단의 아래에서 일어나는 그것을 통해 보여주는 상황을 본적 등 .... 불쾌해!

글쎄! 당신은 쉽게 FF와 IE7을 위해 적절하게 Z-인덱스 값을 조정하여이 문제를 해결할 수 있습니다. 그러나 좋은 옛날 (웃기 의도) IE6이 의도한대로 동작하지 않습니다 .... 당신이 당신의 팝업과 ... 으악!! 약간 크게 높은 Z-인덱스 값을 적용 후에도 통해 SELECT BOX 쇼!

이 문제에 대한 수정은 없습니다하지만,있다, 나는 믿고, 당신에게 대부분의 나를 위해 잘 작동 제가 사용하는 가장 간단한 솔루션을, 말할 임 여기에 몇이 문제를 해결 -하는 방법,하지만보다 더 가지 경우 ....

"당신이 팝업을 표시하면 루즈 선택 상자 숨기기"

단순히 여러분의 스크립트 스니펫 (snippet)에서 귀하의 팝업을 보여, "숨겨진"로 선택 상자의 가시성을 설정하는 스크립트의 조각을 추가

document.getElementById ( 'my_select') style.visibilty = "숨겨진".;

그리고 팝업 부문 가깝게 다시 설정 기억

. document.getElementById ( 'my_select') style.visibilty = "표시";

여기서 "my_select"는 자극 SELECT 박스의 ID입니다

이게 도움이 되었으면 좋겠 ...

PS. 동적 팝업 DIV 아래 IFRAME합니다 (팝업과 동일한 크기) positionining 같은 당연히 다른 옵션이 있는데 ... 이것도 잘 작동하지만, DOM 요소, 스크립트 및 두통의 하중 이외에. 나도이 솔루션을 사용하고 있고, 당신이 할 경우이 옵션과 관련하여 도움이 전혀 필요 알려주 않습니다. 기꺼이 도와 것이다!