웹 개발 시 IE 제목 표시줄을 완벽하게 제어하는 방법

저자：Eve Cole 업데이트 시간：2009-06-30 16:48:05

IE와 현재 브라우저의 제목 표시줄은 원래 <title> HTML 태그로 제어되어야 하며, 물론 지금도 마찬가지입니다. 단지 현재의 유령 추세는 웹 페이지를 더 이상 새로 고치지 않는 것이 좋으며 그런 다음에는 사용자의 모든 피해를 받아들여야 한다는 것입니다. 흔적도 없이 사람을 죽이는 전설의 역설적인 에이잭스 기술!

브라우저의 제목 표시줄에 적절한 페이지 제목을 표시하는 것은 웹 페이지를 전문적으로 표현하는 것이며 검색 엔진에도 친숙합니다. 물론, 적절한 프롬프트 정보가 배치된다면 매우 의미가 있을 것입니다. 그렇다면 제목 콘텐츠를 "동적으로" 사용자 정의하는 방법은 무엇일까요?

우리는 ASP를 사용하여 브라우저 제목을 동적으로 수정할 수 있다는 것을 알고 있습니다. 이는 아마도 다음과 같은 명령문일 것입니다.

ASP.NET 1.1에서는 위의 방법을 계속 사용하는 것 외에도 "아름다운" 모습이 하나 더 있습니다:

aspx 페이지에서:
<title id="cltTitle" runat="서버"></title>
CS 파일에서:
보호된 HtmlGeneralControl cltTitle;
.
cltTitle.innerHtml = "birdshome 홈페이지";

현재는 ASP.NET 2.0 시대입니다. 위

의

두 가지 방법 외에도 <title> 내용을 더 쉽게 수정할 수 있습니다.

Page.Title = "birdshome 홈페이지";

위의 "동적" <title>의 내용은 서버 측에서 수정됩니다. 실제로 브라우저의 경우 <title> 태그 내의 내용은 완전히 수정됩니다. 다시 본론으로 돌아가 클라이언트의 IE 브라우저 제목 표시줄 제어에 대해 자세히 살펴보겠습니다.

IE 창 페이지의 경우 페이지 DOM 객체에서 document.title 속성은 HTML의 innerHTML을 대체하는 데 사용됩니다. IE를 가져오고 설정하는 <title> 요소 창 제목 표시줄의 내용입니다. 다음 예를 고려해보세요:

<html>
<본문>

<스크립트 언어="자바스크립트">
document.body.onload = 함수()
{
document.title = "birdshome 홈페이지";
};
</script>
</body>
</html>

예, 일반 IE 창의 제목 표시줄을 설정하는 것은 매우 간단합니다. 그럼 무슨 말을 해야 할까요? 이때, 모달창에 똑같은 코드를 넣어서 실행하면 어떻게 될까요? 모달 창의 제목 표시줄이 수정되나요? 실험 결과는 실망스러웠습니다. 모달 창에서 똑같은 코드가 실패했습니다. 모달창에서 제공하는 DOM이 일반창에서 제공하는 DOM과 다른가요? 실제로 모달 창의 DOM은 일반 창의 DOM과 동일하지만 차이점은 모달 창의 페이지가 로드된 후 document.title 속성이 실제로 유효하지 않게 된다는 점입니다. 이것이 위 예제 코드의 onload 이벤트에 있는 명령문이 아무런 효과가 없는 이유입니다. 이 제한을 해결하는 방법은 매우 간단합니다. 즉, 페이지가 로드되기 전에 document.title을 수정하는 것입니다. 따라서 모달 창에서 IE 제목 표시줄을 수정하려면 다음 코드를 사용해야 합니다:

<html>
<본문>

<스크립트 언어="자바스크립트">
document.title = "birdshome 홈페이지";
</script>
</body>
</html>

다음은 브라우저 제목 표시줄을 수정하는 위의 두 가지 방법을 포함하는 예입니다. "

abc.htm

" 파일로 저장하여 IE로 열어보면 차이점을 직관적으로 알 수 있습니다.

<본문>
<버튼 onclick="foo()">
열기</button>
<스크립트 언어="자바스크립트">
document.body.onload = 함수()
{
document.title = "birdshome 홈페이지 (다시 작성)" + unescape(H_A0);
};

document.title = "birdshome 홈페이지(첫번째)" + unescape(H_A0)

;
{
window.showModalDialog("abc.htm");
}
</script>
</body>
</html>

결과적으로 일반 IE 창의 제목 표시줄은 "birdshome 홈페이지(첫 번째)"에서 "birdshome 홈페이지(다시 작성)"로 빠르게 변경되는 반면, 모달 대화 상자의 제목은 열기 버튼을 사용하여 열립니다. 항상 "birdshome 홈페이지(첫 번째)"가 됩니다. 이 예에서 우리는 일반 IE 창의 제목 표시줄이 페이지 수명 동안 언제든지 수정될 수 있다는 것을 알 수 있습니다. 모달 창의 제목 표시줄은 페이지가 로드되기 전(onload 이벤트가 트리거되기 전)에만 수정할 수 있습니다. showModelessDialog로 열리는 비모달 대화 상자는 모달 대화 상자와 정확히 동일하게 제목 표시줄을 처리합니다.

마지막으로 document.title을 사용하는 기술에 대해 이야기해 보겠습니다. 페이지 제목이 서버 측에서 "동적으로" 수정되면 <title></title> 태그 사이에 연속 공백을 생성할 수 있습니다. 제목 표시줄에 효과를 입력하세요. 이 기술은 모달 창에서 특히 유용하므로 성가신 "-웹 페이지 대화 상자" 텍스트를 제목 표시줄 밖으로 연속 공백으로 밀어낼 수 있습니다. document.title 속성을 사용하여 페이지 제목 표시줄을 수정한 후에는 일반 창이든 모달 창이든 " " 및 " "(공백)을 사용할 수 없습니다. 전자는 다음과 같이 제목 표시줄에 직접 표시됩니다. 문자열, 후자는 아무리 추가해도 " "(공백) 하나의 너비 효과만 갖게 됩니다. 여기서는 이 문제를 해결하기 위해 또 다른 공간인 Entity 를 사용해야 합니다. 코드는 다음과 같습니다.

<html>
<본문>
<스크립트 언어="자바스크립트">
var HexA0s = "%A0 %A0 %A0 %A0";

document.body.onload = 함수()
{
document.title = "birdshome 홈페이지 (다시 작성)" + unescape(HexA0s);
};
</script>
</body>
</html>

http://birdshome.cnblogs.com/archive/2006/06/23/control_browser_title.html

웹 개발 시 IE 제목 표시줄을 완벽하게 제어하는 ​​방법

웹 개발 시 IE 제목 표시줄을 완벽하게 제어하는 방법