Home >Web Front-end >JS Tutorial >js dynamically modify browser title

js dynamically modify browser title

小云云
小云云Original
2017-12-06 16:17:041686browse

title is a special node element in html. Because it can use document.getElementsByTagName("title")[0] to get the content of the web page title tag, but its value cannot be changed using document.getElementsByTagName("title")[0].innerHtml. After testing, there are two ways to modify native js, and it can also be easily set in jQuery. Friends who are not sure can find out.

innerText method

Through console.log(document.getElementsByTagName("title")[0]), we found that <title># can be printed ## tag, there are only text nodes in the tag, so I guess it can only recognize TextNode, so I set the value of title using innerText method, and it succeeded.

<pre class="brush:php;toolbar:false">document.getElementsByTagName(&quot;title&quot;)[0].innerText = '需要设置的值';</pre>document.title method

After testing, the value of title can also be set through document.title.

console.log(document.title);           # 可以获取title的值。
document.title = '需要设置的值';        # 设置title的值。
For example:

window.onfocus = function () {
  document.title = '恢复正常了...';
};
window.onblur = function () {
  document.title = '快回来~页面崩溃了';
};
We change the value of title when the browser gains focus and loses focus. You can find that when switching browser tabs,

title has changed.

jQuery method

Of course, if your project relies on jQuery, you can use the jq method to set it

$('title').html('')

$('title').text('')
Both methods can be implemented in jq


Summary

In native js, we can dynamically modify the

title of the web page in two ways: innerText and document.title In .jq, we can modify it through
$('title').html('') or $('title').text('').


title is a special node element in html. Because it can use document.getElementsByTagName ("title")[0] to get the title tag of the web page, but cannot use document.getElementsByTagName("title")[0].innerHtml to change it value. After testing, there are two ways to modify native js, and it can also be easily set in jQuery. Friends who are not sure can find out.

innerText method

Through

console.log(document.getElementsByTagName("title")[0]), we found that # can be printed out ## tag, there are only text nodes in the tag, so I guess it can only recognize <code>TextNode</code>, so I set the value of title using <code>innerText</code> method, and it succeeded. <code><pre class="brush:php;toolbar:false">document.getElementsByTagName(&quot;title&quot;)[0].innerText = '需要设置的值';</pre></code>document.title method</p> <h2></h2>After testing, the value of title can also be set through <p>document.title<strong>. <code></code><pre class="brush:php;toolbar:false">console.log(document.title);           # 可以获取title的值。 document.title = '需要设置的值';        # 设置title的值。</pre></strong> For example: </p> <pre class="brush:php;toolbar:false">window.onfocus = function () {   document.title = '恢复正常了...'; }; window.onblur = function () {   document.title = '快回来~页面崩溃了'; };</pre> <p> We change the value of title when the browser gains focus and loses focus. You can find that when switching browser tabs, </p>title<p> has changed. <code></code>jQuery method</p> <h2>Of course, if your project relies on jQuery, you can use the jq method to set it. </h2> <pre class="brush:php;toolbar:false">$('title').html('') $('title').text('')</pre> <p> Both methods in jq can be implemented. </p> <p>The above content is a tutorial on how to dynamically modify the browser title with js. I hope it can help everyone. </p> <p>Related recommendations: </p> <p></p>js for php development to modify the page css style<p><a href="http://www.php.cn/php-weizijiaocheng-255793.html" target="_self"></a></p>Introduction to the use of js to modify the attributes of the prototype_javascript skills<p><a href="http://www.php.cn/js-tutorial-14257.html" target="_self"></a></p>How to use js to modify the client registry_javascript skills<p><a href="http://www.php.cn/js-tutorial-16462.html" target="_self"></a></p><p>The above is the detailed content of js dynamically modify browser title. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="JavaScript function currying" href="https://m.php.cn/faq/382191.html">JavaScript function currying</a></span><span>Next article:<a class="dBlack" title="JavaScript function currying" href="https://m.php.cn/faq/382194.html">JavaScript function currying</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>