01HTMl-<base>标签
一、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>标签的更多相关文章
- HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- HTML <base> 标签
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- 【27前端】base标签带有href属性会让chrome里的svg元素url失效
一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...
- html5权威指南:html base标签
html base标签:http://www.cnblogs.com/yuepeng/archive/2010/08/30/1812498.html
- jsp base标签与meta标签学习小结
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...
- HTML中<base>标签的正确使用
HTML <base> 标签 1. 定义:<base> 标签是 HTML 语言中的基准网址标记,是一个单标签. 2. 作用:规定页面上所有链接的默认 URL 和默认目标. ...
- HTML(八)HTML meta标签&base标签
HTML meta元素 标签(meta-information)用于提供页面有关的元数据,除了提供文档字符集.使用语言.作者等基本信息外,还涉及对关键词和网页等级的设定.通过设置不同的属性,元数据可以 ...
- Base标签小记:更改当前页面的地址
一般来说,H5游戏的部署,index.html和代码资源都会放在同一个地址下然后使用iFrame导入到需要加载游戏的页面即可. 但是今天游戏项目部署遇到了一个问题,游戏自己的访问页面(index.ht ...
- html的base标签
提示:请把 <base> 标签排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了. 注释:如果使用了 ...
- base标签
我们扒取到网站源码很多时候发现路径是采用相对路径,这时候我们就需要采用base标签了,用法非常简单, <base href="我们扒取网站的域名"/> 这时相对路径就相 ...
随机推荐
- [web]Servlet中的Listener和Filter
建议先看看 ——> Servlet工作原理 一.Listener 在Tomcat服务中,Listener的设计是基于观察者模式的,目前在Servlet中提供6中两类事件的观察者接口,它们分别是: ...
- SpringBoot入门(IDEA篇)(三)
一.什么是JPA JPA(Java Persistence API)定义了一系列对象持久化的标准,目前实现这一规范的产品有Hibernate.TopLink等. 二.Mysql数据库示例 1.在app ...
- Linux Mint下FireFox安装Adobe Flash Player
最近在为自己的家里一台很老的机子(由于微软不再支持windows,windows10什么的不是这个老机子可以带的起来的233)选择一个合适的linux系统安装.看来看去,最终选择了排行很靠前,感觉也不 ...
- Struts2和SpringMVC的action是单例还是原型的?
struts2的acion单独使用的时候应是多例的,也就是原型(prototype). 因为它是基于类开发的,它的三种获取页面传参的方式都是通过成员变量的方式来接受的. 如果用struts2框架基于方 ...
- web及时通信传输的几种方法
有哪些: 轮询.长轮询.iframe流.websocket 轮询:http的请求有一个很明显的缺点,就是只能有客户端发起,不能由服务端主动推送,所以轮询就是定时向服务器发送请求,去获取数据 优点:传输 ...
- thinkphp5.0升级
之前一些项目是thinkphp5.0的版本.这个版本是有严重漏洞的.根据官方建议会把Request.php下面的 method方法做一个替换.但是实际上为了安全最好是做一个升级.首先必须要先做一个备份 ...
- 安卓与windows
windows phone 还是PC啊?windows PC的话,应该就是你现在用的电脑系统吧,PC系统和安卓是不一样的,安卓是移动设备系统,基于的构架也不同,意思就是电脑上装不上安卓,移动设备也装不 ...
- 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error
最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...
- eureka 和zookeeper 区别 优势
作为服务注册中心,Eureka比Zookeeper好在哪里 著名的CAP理论指出,一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性).由于分区容错性在是分布式系统中必须要保证的, ...
- selenium+Python(鼠标和键盘事件)
本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按钮 ...