如何动态更新/覆盖页面标题?

时间:2014-04-23 07:35:22

标签: javascript jquery html

我使用的是在线模板,我删除了各种内容以进行自己的修改。 有两页, 索引页面将搜索查询作为输入字段,结果页面显示此查询的结果。 Everythying工作正常,但由于我做了修改,结果页面的标题为

" undefined - 搜索结果"

这个undefined应该显示索引页面的输入字符串。 但我希望它的标题应该只是"搜索结果"

我能做什么,以便它覆盖这个标题,并且只有我需要的标题。

我试过了

document.title = "This is the new page title.";

在html头下,你可以在脚本中看到。

但是这样做之后显示" undefined - 这是新的页面标题。作为标题。

我想删除那个未定义的内容。

这是结果页面的HTML代码,如果你能找到制作标题的最新信息。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <title>The Search results</title>
    <meta content="Mamma" name="description"/>
    <meta content="Mamma" name="keywords"/>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" /> 

    <link media="all" rel="stylesheet" href="/static/results/style.css">
    <!-- Thumbnail-->
    <link media="all" rel="stylesheet" href="/static/component.css">
    <!-- Thumbnail_End-->

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,300italic,600' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="http://mamma.com/static/front/js/jquery-1.8.3.min.js"><\/script>')</script>
    <script type="text/javascript" src="http://mamma.com/static/front/js/jquery.main.js"></script>


    <!--<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.cookies.2.2.0.min.js"></script>-->
    <script type="text/javascript" src="http://mamma.com/static/front/js/scrolltop.js"></script>

    <!-- Thumbnail-->
    <script type="text/javascript" src="http://mamma.com/static/front/js/modernizr.js"></script>


    <!--[if IE]><script type="text/javascript" src="js/ie.js"></script><![endif]-->
    <script language="javascript"type="text/javascript">
document.title = "This is the new page title.";
</script>
</head>

<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/stylemasonry.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/results.js?v=1388742739"></script>



<script type="text/javascript" src="http://mamma.com/static/front/js/common.js"></script>

<!-- Make sure jQuery is loaded. Loads Jquery from Google if not loaded by a plugin. -->
<script type="text/javascript" src="http://mamma.com/static/front/js/jQueryLoader.js"></script>
<!-- SUPERFISH -->
<script type="text/javascript" src="http://mamma.com/static/front/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://mamma.com/static/front/js/superfish.js"></script>


<!-- Flexslider -->
<link media="all" rel="stylesheet" href="http://mamma.com/static/front/css/flexslider.css">
<script type="text/javascript" src="http://mamma.com/static/front/js/jquery.flexslider.js"></script>

<style id="myStyle">
    </style>

    <!-- wrapper -->
    <div id="wrapper">
    <div id="static" size="big">
      <div id="topspace" style="height: 330px;">
      </div>
        <!-- header -->
        <header id="header" class="vcard">
                    <!-- logo -->


                    <style type="text/css">
                    .result_logo{
                        background: url(/static/logos_1.png);
                        background-repeat: no-repeat;
                        /*height: 12px;*/
                        background-size : 100% 100%;
                        float: left;
                        height: 40px;
                        max-width: 230px;
                        width: 230px;
                        cursor: pointer;
                         margin: 0px 3.12% 0 0;
                    }
                    .result_slogo{
                        background: url(http://mamma.com/static/front/images/slogo.png);
                        background-repeat: no-repeat;
                        background-size : 100%;
                        cursor: pointer;
                        height: 42px;
                        margin: 0 22px 0 15px;
                        width: 25px;
                    }
                </style>
                    <a href="http://localhost:8080/ms"><div id="logo" class="result_logo"></div></a>
                    <a href="http://localhost:8080/ms"><div id="logo" class="result_slogo"></div></a>



            <!-- user navigation -->
            <nav class="user-nav">
                <ul>
                    <li><a href="#" class="help">help</a></li>
                    <li><a href="#" class="settings">settings</a></li>
                </ul>
            </nav>
            <style type="text/css">
            .local_text{
                flaot:left;
                border:1px solid red;
            }
            </style>
            <!-- form search -->


            <form id="get_value" action="{% url 'diablo:results' %}" class="form-search" method="get">
                    {% csrf_token %}
                    <fieldset>
                        <input type="text" id="pre_text" name="q" autocomplete="on" value="{{ query }}" class="pre_text">
                        <!--<input type="text" id="pre_test" name="what" autocomplete="on" value="{{ query }}" class="local_what" 
                        onblur=" if(this.value== '') this.value='What?';" onfocus=" if(this.value=='What?') this.value=''; "
                        value="What?" style="display: none;" > 

                        <input type="text" id="pre_where" name="where" autocomplete="on" class="local_where" 
                        onblur=" if(this.value== '') this.value='Where?';" onfocus=" if(this.value=='Where?') this.value=''; "
                        value="" style="display: none;">
                        -->

                        <input type="submit" id="search" value="search">

                    </fieldset>
                </form>

            <div style="clear:both"></div>

        </header>

    </div>

        <!-- twocolumns -->


        <div id="twocolumns">
            <!-- aside -->
            <div class="aside">
                <!-- search areas -->
                <!--<div class="search-areas">

                <a href="#" class="opener"><span>Web</span></a>
                    <div class="drop">
                        <strong class="title">Search areas:</strong>
                        <ul>--><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                            <!--
                              <li  class="active"><a class="we" href="javascript:void(0);">Web</a></li>

                             <li ><a class="we" href="javascript:void(0);">News</a></li>

                             <li ><a class="we" href="javascript:void(0);">Images</a></li>

                             <li ><a class="we" href="javascript:void(0);">Videos</a></li>

                              <li ><a class="we" href="javascript:void(0);">Local</a></li>
                        </ul>
                    </div>
                </div>-->


            </div>
            <div class="holder">
                <!-- search tabs-->
                <!--<div id="prev_next">
                    <div class="small_screen_prev">
                        <div id="prev" style="display:none;"> <img src="http://mamma.com/static/front/images/prev_arrow.png" alt="" /></div>
                    </div>
                    <div class="search-tabs"> 
                        <a href="#" class="opener">search tabs</a>
                        <div class="drop"> <strong class="title">Search tabs:</strong>
                            <div id="tab">
                                <ul></ul>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                    <div class="small_screen_next">
                        <div id="next" style="display:none;"><img src="http://mamma.com/static/front/images/next_arrow.png" alt="" /></div>
                    </div>

                </div>-->
                <!-- search content -->
                 <section class="search-content tab-content" id="mamma_tab_content">

                <h2 style="color:#888; font-size: 150%; margin:20px 0 20px 20px; overflow:hidden;float:left">
                    Meta Search Engine Results
                </h2><br>{% load customfilter %}
                {% for a in r %}
                <div id="org_section_id_20140421181147" class="results-only" style="margin:0 0 0 20px;overflow:hidden;float:left">
                 <div class="midresult" id="main20140421181147">
                    <h3>
                        <a href="{{ a.0 }}">{{ a.1.title|safe }}</a>
                    </h3>   
                    <h4> 
                        <a href="{{ a.0 }}">{{ a.0 }}</a>
                    </h4>
                <p>{{ a.1.desc|safe }}<br/><br/><font size=5 color="green">Google Rank: {{ a.1.GRank|actualRank }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yahoo Rank: {{ a.1.YRank|actualRank }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bing Rank: {{ a.1.BRank|actualRank }}</font></p>

                </div>
                </div>
                {% endfor %}
                 <div class="mamma_tab_content mtabs-1">  
                 </div>

                 </section>

            <div id="searches">
            <div class="search-wrap" id="search-wrap">
                <section class="search-content tab-content">
                </section>
            </div>
                </div>

            </div>

                <!--<div style="width: 100%; padding-bottom: 10px; clear: both; height: 100%; display: none;" id="loadmoreajaxloader">
                <center><img src="http://mamma.com/static/front/images/ajax-loader.gif"></center>
                </div>-->

        </div>
    </div>
    </div>

    <script language="javascript"type="text/javascript">
    var ispace_txtElements = ['result_text'];
    var ispace_brand = '';
    </script>
    <script type="text/javascript" src="http://mamma.com/static/front/js/ptwidget-1.0.js"></script>
        <!-- footer -->


<footer id="footer">
                <div class="row">
                <span class="copy"><p> Developed By Mohit & Jason  </p></span>
                    <ul class="footer-nav">
                        <li><a href="#">  About Meta Search Engine</a></li>
                    </ul>
                </div>
</footer>

<<script>
$('.active').prev().removeClass( "pagenum" );
$('.active').next().removeClass( "pagenum" );
</script>               

</body>

 </html>

4 个答案:

答案 0 :(得分:2)

在页面底部试试

$( document ).ready(function() {
  document.title = "This is the new page title."
});

答案 1 :(得分:1)

你应该使用。

document.title = "This is the new page title."

但这不符合SEO。

答案 2 :(得分:0)

试试这个:

 $('title').html($('title').html().replace("undefined -",""));

使用javascript:

 document.title = document.title.replace("undefined -","")

您还需要确保将代码包装在DOM中:

 $(document).ready(function(){
   $('title').html($('title').html().replace("undefined -",""));//or document.title = document.title.replace("undefined -","")
 })

答案 3 :(得分:0)

请试试这个 document.title = "Title here"