在做移动端网站时,有时因技术问题或其他原因无法制作响应式版面,而移动端页面只能放到子目录下,但是手机端通过搜索引擎进入网站电脑端子页面,无法匹配到移动端页面,使得用户体验很不好,即影响排名也影响转化。这里有一个js代码可以实现用户使用手机访问电脑端,自动跳转到对应手机页面。举例:一个pc页面https://www.800xiaos.com/2/2795/,对应移动url为https://m.800xiaos.com/2/2795/,使用手机端访问pc页面https://www.800xiaos.com/2/2795/,则自动跳转至移动页面https://m.800xiaos.com/2/2795/。js代码如下:

<script type="text/javascript">
function GetUrlRelativePath()
  {
    var url = document.location.toString();
    var arrUrl = url.split("//");
    var start = arrUrl[1].indexOf("/");
    var relUrl = arrUrl[1].substring(start);
    if(relUrl.indexOf("?") != -1){
      relUrl = relUrl.split("?")[0];
    }
    return relUrl;
  }
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
if (!flag){
location.href="https://m.800xiaos.com"+GetUrlRelativePath();;
}
</script>

注意:这个办法并非最优选择,弊端在于对搜索引擎并不友好,因为加载资源后再跳转,增加了用户访问成本。建议使用301重定向来处理

推荐阅读:网站优化的排名原理

JS实现PC端URL跳转到对应移动端URL的更多相关文章

  1. drupal7设置不含www的url跳转到含www的url

    打开drupal的.htaccess文件 找到 If your site can be accessed both with and without the 'www.' prefix 将下面对应的三 ...

  2. URL跳转漏洞

    URL跳转原理: 由于越来越多的需要和其他第三方应用交互,以及在自身应用内部根据不同的逻辑将用户引向到不同的页面,譬如一个典型的登录接口就经常需要在认证成功之后将用户引导到登录之前的页面,整个过程中如 ...

  3. js判断PC端 移动端 并跳转到对应页面

    一.PC端跳转到移动端 html页面: <script>var webroot="/",catid="{$catid}",murl="m/ ...

  4. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  5. js判断移动终端url跳转

    CODE <script> //判断终端url跳转 function sp_isMobile() { return Boolean(navigator.userAgent.match(/. ...

  6. JS实现手机访问pc网址自动跳转到wap网站

    之前写pc端直接跳转wap端一直是后端java写的,跟js一样都是根据navigator.userAgent来判断设备是电脑还是手机的,我知道这种前端也可已完成的功能,只是后台比较强势,本人本着以和为 ...

  7. 项目部署之nginx实现PC端和移动端自动跳转

    假设PC端域名为 www.abc.com     移动端域名为m.abc.com PC端nginx配置文件server中加入如下代码: if ($http_host !~ "^www.abc ...

  8. 判断pc端或移动端并跳转

    判断pc端或移动端并跳转 代码目录: index.html代码: <!DOCTYPE html> <html lang="en"> <head> ...

  9. js 点击超链接,执行js脚本,而不进行url跳转

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

随机推荐

  1. CTF-Reverse-[GXYCTF2019]luck_guy

    CTF-Reverse-[GXYCTF2019]luck_guy 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与 ...

  2. shell脚本传参执行spark-submit

    读取多个目录下的本地文件,多个目录通过循环遍历的方式,以参数传递: #!/bin/bash i=0while [ $i -lt 10000 ] do echo "i=$i" spa ...

  3. 【FPGA篇章七】FPGA系统任务:详述常用的一些系统函数以及使用方法

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 系统任务和系统函数是Verilog标准的一部分,都以字符"$"为开头.系统任务可划分为六类,下面分别给出一些常用任务的用 ...

  4. 前端组件:支持多选,支持选项筛选的下拉框选择器(基于Jquery和Bootstrap)

    效果图一:多选 效果图二:选项筛选 最后奉献源码,复制出来直接可用 <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. 【clear linux】intel clear linux 电源状态命令

    # 重启系统 $ sudo systemctl reboot # 关闭系统,切断电源 $ sudo systemctl poweroff # CPU停止工作 $ sudo systemctl halt ...

  6. 2018-07-01 jq效果

    jq效果的实现方法: 1.基本 show(time) -> 显示:相当于display:block hide(time) -> 隐藏:相当于display:none toggle(time ...

  7. TreeSet的两种实现方法:Comparable和Comparator(Java比较器)

    Comparable与Comparator实际上是TreeSet集合的两种实现方式,用来实现对象的排序.下边介绍一下两种比较器的使用方法和区别. Comparable称为元素的自然顺序,或者叫做默认顺 ...

  8. Dotnet core使用JWT认证授权最佳实践(二)

    最近,团队的小伙伴们在做项目时,需要用到JWT认证.遂根据自己的经验,整理成了这篇文章,用来帮助理清JWT认证的原理和代码编写操作. 第一部分:Dotnet core使用JWT认证授权最佳实践(一) ...

  9. Spring Boot 使用 JSR303 实现参数验证

    简介 JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation. 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过 ...

  10. Vue+Vuex实现自动登录 升级版

    Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录       在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我 ...