有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题。

  这时候就会想到使用js或jQuery去实现了。

  1、js方式。

  首先,我想到了使用document.getElementsByTagName()去获取页面的title标签,这是可以获取的。例如:

<title>标题</title>
<script>
var Title = document.getElementsByTagName('title')[0]
console.log(Title) // <title>标题</title>
</script>

  然而,当我想用Title.title去获取或设置值时是不生效的。

  获取title值: console.log(Title.title) 会发现是无法获取到值的

  同理,设置网页title值: Title.title = 'hello world!' 会发现网页的标题也是没有被更改的

  所以通过这种方法是无法获取和更改网页的title的。

  

  其实,我们可以通过document.title来直接获取title值或者设置title值的

<title>标题</title>
<script>
document.title = 'hello world!'
</script>

  结果:

    

  可以发现这个办法是行得通的。

  2、jQuery方式

<title>标题</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function(){
$('title').html('hello!') // 此处也可以使用text()方法
})
</script>

  

  

  

如何动态修改网页的标题(title)?的更多相关文章

  1. 怎样查看或修改网页的标题title

    网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: document.title; // ...

  2. Vue动态修改网页标题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

  3. 使用JS动态修改网页body的背景色

    大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个JS的脚本去改变body部分的背景色,代码如下: // ==UserScript== // @name ChangeBackgroundCol ...

  4. jquery无法修改网页标题,无法修改网页标题

    今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...

  5. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  6. 小程序block标签配合if和else 和 动态修改标题栏

    <block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...

  7. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  8. 基于Vue的SPA动态修改页面title的方法

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一 ...

  9. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

随机推荐

  1. npm lodash

    在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解. ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数 ...

  2. JavaScript Array 对象方法 以及 如何区分javascript中的toString()、toLocaleString()、valueOf()方法

    1.concat() 2.join() 3.pop() 4.push() 5.reverse() 6.shift() 7.unshift() 8.slice() 9.sort() 10.splice( ...

  3. 获取两个时间节点的月份列表&&每个月份的开始时间及结束时间

    //Q:从今天起之前五个月的列表 date_default_timezone_set('PRC'); $time=strtotime('-5 month'); //包含本月 $begin = strt ...

  4. C#后台生成验证码

    https://www.cnblogs.com/vchenpeng/archive/2013/05/12/3074887.html /// <summary>          /// 获 ...

  5. TCP 建立连接:三次握手

    转自:http://www.cnblogs.com/winner-0715/p/5032661.html 感谢! TCP 建立连接过程 TCP是因特网中的传输层协议,使用三次握手协议建立连接,下面是T ...

  6. SSM整合---实现全部用户查询

    SSM整合 准备 1.创建工程 2.导入必须jar包 链接: https://pan.baidu.com/s/1nvCDQJ3 密码: v5xs 3.工程结构 代码 SqlMapConfig < ...

  7. Android 快速点击的处理

    为了对付拥有麒麟臂的测试人员或者用户对我们的按钮等控件展开惨无人道的快速啄击.厮以为可以用如下方法: 1 setEnabled 大法:在用户点击发生后调用setEnable(false);阻止持续受到 ...

  8. iOS开发系列

    因为最近面试了一些人,校招.初中级.高级.架构师,各种级别的,发现大家水平差异很大,有的高级的工程师很多问题都回答不上来,所以想梳理下iOS的知识点,写成一个系列,如果时间允许的话,会录制成视频放到网 ...

  9. Android开发——使用高级的RecyclerView实现侧滑菜单删除功能(SwipeRecyclerView)

    使用之前,先简单介绍一下这个SwipeRecyclerView,这是严大(严振杰)基于RecyclerView的进行修改和封装的高级RecyclerView,其可以实现像QQ聊天界面的侧滑删除菜单,和 ...

  10. Linux Select之坑

    最近在写一个demo程序,调用select()来监听socket状态,流程如下: r_set 初始化 timeout 初始化3秒超时 loop{ select(ntfs, &r_set, nu ...