欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > 利用JS或JQuery修改网页title和meta标签的content内容
这篇文章主要为大家详细介绍了利用JS或JQuery修改网页title和meta标签的content内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

网页的title和meta标签、content内容是可以通过JQuery和JS来修改的,具体经常见到的就是不少朋友的网站被挂马或者劫持的时候,经常会是这样的情况,本文361模板将分别介绍它们的实现方法。

利用JS或JQuery修改网页title和meta标签的content内容

网页meta标签

关于网页meta标签前面361模板也做过不少的介绍,有兴趣了解的朋友可以参看http://www.ke361.com/tag/meta_1165_1.html。关于这一点小编想起来需要介绍,也是源于昨天小编把荒废了几年的淘电影网重新开通了,里面有关于meta标签的优化,所以今天小编才想起来也给大家做个小小的介绍。

一、修改meta标签的content内容

例如网页的meta标签原来是这样写的:

<meta property="fb:app_id" content="*************" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:type" content="" />
<meta property="og:image" content="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />

那么我们可以用JQuery或JS来修改meta标签的content内容。

JQuery实现代码如下:

$('meta[property="og:description"]').attr('content',"***" );

或:

$("meta[property='og:description']").attr('content', "***");

知识延伸: "property=" 在 Chrome 中无效?

有网友提示,meta里 "property=" 在 Chrome 中无效,需要这样写才正确:

$("meta[name='og:description']").attr('content', "***");

即是把 "property=" 改为 "name=" 。JS实现代码如下:

var metaList = document.getElementsByTagName("meta");
for (var i = 0; i < metaList.length; i++) {
  if (metaList[i].getAttribute("property") == "fb:app_id") {
    metaList[i].content = "somenewcontent";
  }
}

二、JS修改网页title

无需jQuery就能修改title,代码如下:

document.title = "123";

点击按钮动态改变,代码如下:

$("#myBtn").click(function(){
  document.title = "123";
});

myBtn为按钮的id

如果只有一个按钮(或点击任意一个按钮时触发事件),代码也可以这样写:

$("button").click(function(){
  document.title = "123";
});

jQuery修改网页title当然,我们也可以用jQuery来实现,代码如下:

$('title').html("123");

效果都是一样的,当然有了以上的基础至少后,我们就可以进行扩展,例如很多网站劫持中经常用到的:当用户从百度等搜索引擎来路进来的时候显示的是修改过的标题,但是直接打开网站显示的却是网站正常的标题,这个就是利用JS或JQuery修改网页title和meta标签的content内容的一额具体的应用,虽然很遭人嫌弃!

 

以上就是本文的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361源码网。

感谢打赏,我们会为大家提供更多优质资源!

上一篇PHP7.0环境下织梦DedeCMS文章页空白的解决方法

下一篇HTML中a标签空链接href=#与href=javascript:void(0)的区别【转】

延伸阅读

《利用JS或JQuery修改网页title和meta标签的content内容》期待您的评论!

评论功能暂时关闭!:)。
取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在