一、base用于定义页面链接的打开方式

  <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面。

  • _blank,在新窗口显示目标网页
  • _parent,框架网页中当前整个窗口位置显示目标网页
  • _self,在当前窗口显示目标网页
  • _top,框架网页中在上部窗口中显示目标网页

 

二、base用于URL的基础定位

  <base href=""/> 定义页面用于URL的基础定位
  <base>标签可以为整个页面定义所有链接的基础定位,主要作用是为了确保文档中的所有相对定位URL都可以被分解成正确的文档地址,使文档本身被移动或重命名的情况下也可以正确的解析,当这些元素进行跳转时,都会基于当前目录加上这个默认的URL(相对路径的情况下)再加上自己的href属性值来跳转。

 

***  <base>标签对页面中元素href为绝对路径的元素是不起作用的,但是绝对链接必须是完整的,否则还是会被base影响到

三、<base>标签的坑

在使用base标签的页面,需要使用相对路径的地方,比如说锚链接,或者a标签跳转到其他页面会被影响到。这样就很麻烦。
我尝试写了一段代码用于在需要使用相对链接或者锚链接的页面:

 function getByClass(oParent,sClass){
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var re = new RegExp('\\b'+sClass+'\\b','i'); for(var i=0;i<aEle.length;i++){
if(re.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
return aResult;
} function getUrl(obj){
var loadHref = window.location.href;
var baseHref = loadHref.substring(0,loadHref.lastIndexOf("/")) + '/';
var toHref = obj.getAttribute("href");
var indexA = loadHref.lastIndexOf("#");
var indexB = toHref.lastIndexOf("#", 0);
var href = null; if (indexB >= 0) {
if(indexA>0){
href = loadHref.substring(0,loadHref.lastIndexOf("#")) + toHref;
}else{
href = loadHref + toHref;
}
} else {
href = baseHref + toHref;
} return href;
}

 

 <div id="myTest" class="test-wrap">
<a id="myTestL" href="#toTest" class="changeWay">锚链接</a>
<a id="myTestR" href="jump.html" class="changeWay">跳转</a>
</div>

 

var Doc = document;
var aChngs = getByClass(Doc,'changeWay'); for(var i=0;i<aChngs.length;i++){
aChngs[i].setAttribute('href',getUrl(aChngs[i]));
}

  * 使用jQuery的话,引入jQuery文件的时候需要使用绝对路径来引用,免得被base影响到,这样就可以;

 

 function GetMaoUrl(obj){
var loadHref = window.location.href;
var baseHref = loadHref.substring(0,loadHref.lastIndexOf("/")) + '/';
var toHref = obj.attr('href');
var indexA = loadHref.lastIndexOf("#");
var indexB = toHref.lastIndexOf("#", 0);
var href = null; if (indexB >= 0) {
if(indexA>0){
href = loadHref.substring(0,loadHref.lastIndexOf("#")) + toHref;
}else{
href = loadHref + toHref;
}
} else {
href = baseHref + toHref;
} return href;
}
$('.changeWay').each(function (){
$(this).attr('href',GetMaoUrl($(this)));
})

  

 ps:作为一个菜鸟,水平实在有限,遇到这个问题之后向很多人请教,结果得到的大多建议是放弃使用base。我觉得存在就是有价值的,可能有更好的方法由于自己的眼界所限看不到,所以如果您有更好的解决方案或者对上述代码有优化建议请不吝赐教;

01HTMl-<base>标签的更多相关文章

  1. HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...

  2. HTML <base> 标签

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...

  3. 【27前端】base标签带有href属性会让chrome里的svg元素url失效

    一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...

  4. html5权威指南:html base标签

    html base标签:http://www.cnblogs.com/yuepeng/archive/2010/08/30/1812498.html

  5. jsp base标签与meta标签学习小结

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  6. HTML中<base>标签的正确使用

    HTML <base> 标签 1.  定义:<base> 标签是 HTML 语言中的基准网址标记,是一个单标签. 2.  作用:规定页面上所有链接的默认 URL 和默认目标. ...

  7. HTML(八)HTML meta标签&base标签

    HTML meta元素 标签(meta-information)用于提供页面有关的元数据,除了提供文档字符集.使用语言.作者等基本信息外,还涉及对关键词和网页等级的设定.通过设置不同的属性,元数据可以 ...

  8. Base标签小记:更改当前页面的地址

    一般来说,H5游戏的部署,index.html和代码资源都会放在同一个地址下然后使用iFrame导入到需要加载游戏的页面即可. 但是今天游戏项目部署遇到了一个问题,游戏自己的访问页面(index.ht ...

  9. html的base标签

    提示:请把 <base> 标签排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了. 注释:如果使用了 ...

  10. base标签

    我们扒取到网站源码很多时候发现路径是采用相对路径,这时候我们就需要采用base标签了,用法非常简单, <base href="我们扒取网站的域名"/> 这时相对路径就相 ...

随机推荐

  1. 看完MJ讲解的单例后的个人总结

    1.单例的介绍 单例是iOS常用的开发模式的一种. 2.什么是单例 单例就是一个类只创建一个对象,只分配一次内存空间. 3.单例的应用场景 1)系统的单例:  [UIApplication share ...

  2. Linux rsync 企业级应用

    简介 rsync 是 Linux 下的数据同步工具, 其支持本地同步和远程同步, 远程同步分为 daemon 和 ssh 同步方式    rsync 可以代替 cp, scp 等命令, 且具有更高的可 ...

  3. linux I/O函数使用

    一.lseek lseek函数的作用是用来重新定位文件读写的位移. 头文件以及函数声明 #include <sys/types.h> #include <unistd.h> o ...

  4. js 常用js正则表达式大全

    一.校验数字的js正则表达式   1 数字:^[0-9]*$     2 n位的数字:^d{n}$     3 至少n位的数字:^d{n,}$     4 m-n位的数字:^d{m,n}$     5 ...

  5. python高级(二)—— python内置序列类型

    本文主要内容 序列类型分类: (1)容器序列.扁平序列 (2)可变序列.不可变序列 列表推导式 生成器表达式 元组拆包 切片 排序(list.sort方法和sorted函数) bisect pytho ...

  6. 简述Dubbo

    目前处于实习期间,白天工作,网上自主学习.最近没事逛了一下当前招聘网上的招聘要求,其中dubbo这个关键字出现的比较多,因此花了点时间学习了一番,在这写写自己的理解. 说起Dubbo,得先聊聊RPC, ...

  7. 128th LeetCode Weekly Contest Capacity To Ship Packages Within D Days

    A conveyor belt has packages that must be shipped from one port to another within D days. The i-th p ...

  8. FlutterToast 使用

    参看 FlutterToast 开源库 https://github.com/PonnamKarthik/FlutterToast

  9. 转 OGG 部署阶段常见问题

    序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...

  10. Centos7修改主机名称、DNS、网卡信息

    1 hostnamectl set-hostname wangshuyi 2 vi /etc/hostname 3 vi /etc/resolv.conf 4 vi /etc/sysconfig/ne ...