简体   繁体   中英

Page title doesn't show in browser tab

I am not a designer by working nature. And the issue I am facing is weird.

Here is the code snippet from MVC4 -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>@ViewBag.Title</title>
<link href="~/Content/Images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
@Styles.Render("~/Content/spr")
@Scripts.Render("~/bundles/modernizr")
</head>

<body>
<header>
    <div class="container-custom clearfix">
        <div class="col-lg-3 page-title">
            <h3>@Resources.Home.ProductName</h3>
        </div>
    </div>
</header>
<div class="container-custom clearfix">
    @RenderBody()
</div>
@Scripts.Render("~/bundles/prHome")
</body>
</html>

Now when I see source code from browser, the title text is there. But the same doesn't show up in browser tab. Rather the url of website as localhost/xx/abc show up.

Tested both in Firefox and Chrome. I tried cleaning cache and temporary files. But not helpful in any way.

Can anyone guide me what could be the possible reason for same?

Big thanks goes to @ReeCube for analyzing different possibilities for issue.

True cause of issue -

I was calling some function on some element on page load by jQuery. But that very function was not in existence. And so that error was messing with title part somehow.

Solution -

Ensure your scripts are not throwing any sort of error. I did it by opening Developer Console from Chrome by Ctrl+Shift+I .

I faced similar issue while developing MVC application which has Layout page & bootstrap used.

It was working fine for IE10+ but not for prior versions. There were no javascript errors found as suggested by @ReeCube & @VSSaini (checked through developer tool).

What I found was, though I had title & meta tags inside head section, the actual page rendered was containing these tags inside body tag, which was causing issue.

To solve this problem, we can put below piece of javascript code in layout script.

if (!document.title && typeof document.getElementsByTagName('title')[0] === 'object') {
    document.title = document.getElementsByTagName('title')[0].innerHTML;
}

That's it. It will solve problem for all the browsers

我刚刚测试过,它的代码如下:

 <link rel="shortcut icon" href="images/icon.png">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM