How to perfectly control the IE title bar in Web Development

Source: Internet
Author: User

The title bar of IE and any current browser should have been controlled by the <title> HTML Tag. Of course, it is still true. But the current ghost trend is that you 'd better not refresh your webpage any more, and then accept the abuse of users. This is also the legendary Ajax technology that never comes to an end!

Displaying an appropriate page title in the title bar of a browser is a professional performance of a webpage and is also friendly to search engines. Of course, it makes sense to put appropriate prompts. So how can we customize the title content dynamically?

We know that using ASP to dynamically modify the title of the browser is probably like this statement:

< Title > <%   = Generatetitle %> </ Title >

In ASP. NET 1.1, apart from the above method, we have an additional method that looks "beautiful:

In ASPX page:
< Title ID = "Clttitle" Runat = "Server" > </ Title >
In CS file:
Protected htmlgeneralcontrol clttitle;
...
Clttitle. innerhtml = "birdshome's Homepage ";

Today, in the ASP. NET 2.0 era, apart from the above two methods, we can also easily modify the <title> content:

Page. Title =   " Birdshome's Homepage " ;

However, the above "Dynamics" are all about modifying the <title> content on the server. In fact, the content in the <title> tag is completely fixed for the browser. The following is a back-to-back example of the client's control over the title bar of the IE browser:

For pages in the IE window, in the page DOM object, the document. Title attribute is used to obtain and set the content of the title bar of the IE window in place of innerhtml of the <title> element. See the following example:

< Html >
< Body >
<! --Page Content-->
< Script Language = "JavaScript" >
Document. Body. onload =   Function ()
{
Document. Title =   " Birdshome's Homepage " ;
};
</Script>
</Body>
</Html>

Yes, you can set the title bar of the general ie window in this simple way. So what can I say about this? In this caseCodePutModal windowIs it executed? Will the title bar of the modal window be modified? The test results are frustrating. The code is exactly the same and fails in the modal window. Is the DOM provided by the modal window different from that provided by the normal window? In fact, the DOM of the modal window is the same as that of the normal window. The difference is that after the page loading in the modal window is complete, the document. Title attribute will indeed become invalid. This is why the statement in the onload event in the preceding sample code is invalid. The solution to this limitation is very simple, that is, to modify document. Title when the page is not loaded, so you should modify the IE title bar in the modal window because this code should be used:

< Html >
< Body >
<! -- Page Content -->
< Script Language = "JavaScript" >
Document. Title =   " Birdshome's Homepage " ;
</ Script >
</ Body >
</ Html >

The following is an example of the above two methods to modify the browser title bar. Save it as a "abc.htm" file and open it with IE to see the difference intuitively:

< Html >
< Body >
< Button Onclick = "Foo ()" >
Open </ Button >
< Script Language = "JavaScript" >
Document. Body. onload =   Function ()
{
Document. Title =   " Birdshome's homepage (rewrite) "   + Unescape (h_a0 );
};

Document. Title= "Birdshome's homepage (first)" +Unescape (h_a0 );

Function Foo ()
{
Window. showmodaldialog ( " Abc.htm " );
}
</ Script >
</ Body >
</ Html >

The result is that the title bar of the normal ie window changes from "birdshome's homepage (first)" to "birdshome's homepage (rewrite )", the title of the modal dialog box opened with the Open button will always be "birdshome's homepage (first )". In this example, we can see that the title bar of a common ie window can survive on the page.Anytime. The title bar of the modal window can only be displayed on its page.Before loading is complete(Before the onload event is triggered. Non-Modal Dialog Box: opend by showmodelessdialog. The processing of the title bar is exactly the same as that of the modal dialog box.

Let's talk about another document. tips for using title: If you modify the page title dynamically on the server side, you can write & NBPs to the <title> </title> tab; to generate consecutive space input effects on the title bar. This technique is particularly useful in modal windows, so that we can push the nasty "-web page dialog" words out of the title bar with consecutive spaces. Use document. after the title attribute is used to modify the title bar of a page, "& nbsp;" and "" (Space) cannot be used, the former is directly displayed on the title bar when the string is added, and the latter is added with only one "" (Space) width. Here we need to use another space, entity & #160; to solve this problem. The Code is as follows:

< Html >
< Body >
< Script Language = "JavaScript" >
VaR Hexa0s =   " % A0 % A0 % A0 % A0 " ;

Document. Body. onload =   Function ()
{
Document. Title =   " Birdshome's homepage (rewrite) "   + Unescape (hexa0s );
};
</ Script >
</ Body >
</ Html >

& #160; it is really a good thing. Another problem solved by using it is: the method of filling leading spaces in option entries

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.