Javascript 如何动态更新/覆盖页面标题？
我正在使用一个在线模板，在这个模板中，我删除了各种内容以进行自己的修改。 有两页,， 索引页面将搜索查询作为输入字段，结果页面显示此查询的结果。 一切都很好，但由于我所做的修改，结果页面的标题如下 “未定义-搜索结果” 这个未定义的字符串应该显示索引页中的输入字符串。 但我希望它的标题应该是“搜索结果” 我所能做的是，它覆盖了这个标题，只是有我需要的标题 我试过了Javascript 如何动态更新/覆盖页面标题？,javascript,jquery,html,Javascript,Jquery,Html,我正在使用一个在线模板，在这个模板中，我删除了各种内容以进行自己的修改。 有两页,， 索引页面将搜索查询作为输入字段，结果页面显示此查询的结果。 一切都很好，但由于我所做的修改，结果页面的标题如下 “未定义-搜索结果” 这个未定义的字符串应该显示索引页中的输入字符串。 但我希望它的标题应该是“搜索结果” 我所能做的是，它覆盖了这个标题，只是有我需要的标题 我试过了 document.title = "This is the new page title."; 在html标题下，正如您在脚本中看
document.title = "This is the new page title.";
<!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 }} Yahoo Rank: {{ a.1.YRank|actualRank }} 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>
搜索结果
window.jQuery | | document.write（“”）
document.title=“这是新的页面标题。”；
.result_标志{
背景：url（/static/logos_1.png）；
背景重复：无重复；
/*高度：12px*/
背景大小：100%100%；
浮动：左；
高度：40px；
最大宽度：230px；
宽度：230px；
光标：指针；
利润率：0px 3.12%0；
}
.result_slogo{
背景：url(http://mamma.com/static/front/images/slogo.png);
背景重复：无重复；
背景大小：100%；
光标：指针；
高度：42px；
利润率：0.22px 0.15px；
宽度：25px；
}
.本地文本{
flaot：左；
边框：1px纯红；
}
{%csrf_令牌%}
元搜索引擎结果
{%load customfilter%}
{r%中的a为%r}
{a.1.desc | safe}
谷歌排名：{a.1.GRank | actualRank}}雅虎排名：{a.1.YRank | actualRank}必应排名：{a.1.BRank | actualRank}
{%endfor%}
var ispace_txtElements=['result_text']；
var ispace_brand=“”；
由Mohit&Jason开发
试试这个：
$('title').html($('title').html().replace("undefined -",""));
使用javascript：
document.title = document.title.replace("undefined -","")
您还需要确保将代码包装在DOM ready中：
$(document).ready(function(){
$('title').html($('title').html().replace("undefined -",""));//or document.title = document.title.replace("undefined -","")
})
你应该使用
document.title = "This is the new page title."
但这是不符合SEO标准的。请试试这个
document.title=“title here”
在页面底部尝试此操作
$( document ).ready(function() {
document.title = "This is the new page title."
});
我尝试了document.title=“这是新的页面标题。”正如您在脚本中看到的那样，在html标题下。但执行此操作后，它会显示“未定义-这是新的页面标题”。作为标题。我想删除未定义的。我已尝试document.title=“这是新的页面标题。”；在html标题下，正如您在脚本中看到的那样。但这样做之后，它会显示“undefined-这是新的页面标题。作为标题。我想删除未定义的。您使用的浏览器是哪种浏览器？我尝试过使用它，它仍然会在标题标题的前面显示undefined。在页面底部尝试它很有效。我真傻。