有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的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. python 小脚本升级-- 钉钉群聊天机器人

    一则小脚本(工作中用) 在这篇文章中写的监控的脚本,发送监控的时候 是利用的邮箱,其实在实际,邮箱查收有着不方便性,于是乎升级, 我们工作中,经常用钉钉,那么如果要是能用到钉钉多好,这样我们的监控成功 ...

  2. [编织消息框架][JAVA核心技术]异常基础

    Java异常体系结构 Thorwable类所有异常和错误的超类,有两个子类Error和Exception,分别表示错误和异常. 其中异常类Exception又分为运行时异常(RuntimeExcept ...

  3. Webpack 2 视频教程 020 - Webpack 2 中的 HMR ( Hot Module Replacement )

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. VS2010安装OpenGL

     以下涉及到的所有资源都在这里: 链接:https://pan.baidu.com/s/1eSctT5K 密码:174s *我的VS2010的安装位置:D:\Program Files (x86)\M ...

  5. Xamarin.android Activity动画切换效果实现

    http://blog.csdn.net/esunshine1985/article/details/44302903 1.在Resources--values下新建styles.xml,添加内容如下 ...

  6. TCP/IP协议栈(三)——linux 向下的报文处理

    应用程序连接服务器时,目的地套接字地址(端口号和IP地址)以参数形式传递给系统调用connect(tcp_v4_connect()).下面逐步介绍初始化该连接 检查内核路由表,查找给定目的地IP地址路 ...

  7. ubuntu环境下python虚拟环境的安装

    一. 虚拟环境搭建 在开发中安装模块的方法: pip install 模块名称 之前我们安装模块都是直接在物理环境下安装,这种安装方法,后面一次安装的会覆盖掉前面一次安装的.那如果一台机器上面开发多个 ...

  8. 大数据学习系列之八----- Hadoop、Spark、HBase、Hive搭建环境遇到的错误以及解决方法

    前言 在搭建大数据Hadoop相关的环境时候,遇到很多了很多错误.我是个喜欢做笔记的人,这些错误基本都记载,并且将解决办法也写上了.因此写成博客,希望能够帮助那些搭建大数据环境的人解决问题. 说明: ...

  9. Netty之ProtoBuf(六)

    Protocol Buffer的基本使用(六) 一.简介 Protocol Buffer(简称ProtoBuf)是google的一个语言中立,平台中立,可扩展的对结构化的数据进行序列化的一种机制,和X ...

  10. jQuery Ajax 操作函数 (七)

    函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxE ...