一、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. linux用到的命令

    命令行下利用别名打开ss以及设置相关代理(写到~/.bashrc中使永久有效) #open proxy alias proxystart='gsettings set org.gnome.system ...

  2. leetcode-137-Single Number II-第一种解法

    题目描述: Given an array of integers, every element appears three times except for one, which appears ex ...

  3. redis存储的数据类型

    key-velue数据结构存储 key   只能是字符串 value 有5种数据leixing. 字符串 string 哈希 hash 列表 list 集合 set 有序集合 zset

  4. getLong not implemented for class oracle.jdbc.driver.T4CRowidAccessor

    症状: SpringMVC+MyBatis向数据库插入数据,主键应用ORACLE中自己设置的自增序列会发生如下错误: nested exception is Java.sql.SQLException ...

  5. 高阶篇:4.1.1)QFDI(客户需求转换为设计要求)

    本章目的:明确QFDI的作用:收集客户需求(Customer Needs),转换为设计要求(Design Feature).并介绍其制作方法. 1.QFDI质量屋举例 不用怀疑,现在大部分参考教材所谓 ...

  6. Go语言包和文件

    工作空间 Go语言工作空间:编译工具对源码目录有严格要求,每个工作空间 (workspace) 必须由bin.pkg.src三个目录组成. src ---- 项目源码目录,里面每一个子目录,就是一个包 ...

  7. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

  8. UUID生成工具

    public class UUIDUtils { private static SecureRandom SEEDER_STATIC = null; private static byte[] ADD ...

  9. A problem has been detected and windows has been shut down to prevent damage

    问题描述 问题解决 参考百度经验, 未解决,重装系统,U盘启动解决.过程可以参考上一篇博文.

  10. 2019第九届MathorCup数学建模

    题目下载:https://www.lanzous.com/i3taz2j 总共四个问题 问题1 首先附件一中的数据,拿到后肯定感觉棘手.我们的处理方法: 在下面缺失数据的地方我们都认为是问题3中的预测 ...