一般来说，H5游戏的部署，index.html和代码资源都会放在同一个地址下然后使用iFrame导入到需要加载游戏的页面即可。

但是今天游戏项目部署遇到了一个问题，游戏自己的访问页面（index.html）的地址（a.com）和游戏代码资源的地址（b.com）不在一个地方，这就导致在index中加载了游戏代码后，游戏代码中引用的所有相对路径的资源都报404，（比如实际地址是b.com/res/1.png，但是由于加载到index中，使用a.com的路径，所以请求地址变成了a.com/res/1.png，当然会404了。）

解决方法就是修改当前页面的默认地址，即Base标签。

地址不变时

游戏资源地址不会变化时可以这么写：

<html>

<head>

<base href="http://www.b.com/res/" />

</head>

<body>

</body>

</html>

此时，当前页面下的所有相对路径都相对于b.com/res/这个路径来寻找。

地址会变动时

地址会变动时，可以采用js动态添加base标签或动态修改base标签来改变默认地址，如下：

 var basePath = ""; // 各种方式获取要更改的默认路径

 var base = document.createElement("base");

 base.setAttribute("href", basePath);

 document.getElementsByTagName('head')[0].appendChild(base);

效果一致。

注意事项

默认地址一旦改变，就会影响当前页面上的所有相对路径。

Base标签小记：更改当前页面的地址的更多相关文章

  1. JavaScript Window Location　当前页面的地址

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. Window Location window.location 对象在编写时可不使用 window ...

  2. vue监听当前页面的地址变化/路由变化

    转载自: Heap Stack(Pingbook) https://pingbook.top/vue-watch-current-url-route-change/

  3. base标签的作用

    base标签可以自定义当前页面的相对路径,不受浏览器当前地址栏的影响,以base标签定义的地址为准 (只对相对路径起作用) <head> <meta charset="UT ...

  4. base标签的作用是什么

    转自:https://www.cnblogs.com/chenqiBlog/p/9517905.html base标签是HTML语言中的基准网址标记,它是一个单标签,位于网页头部文件的head标签内, ...

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

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

  6. PHP中$_SERVER获取当前页面的完整URL地址

    PHP中$_SERVER获取当前页面的完整URL地址,其实很简单,主要是通过$_SERVER超全局变量来实现的. 具体PHP中$_SERVER获取当前页面的完整URL地址如下. #测试网址:     ...

  7. 【转】asp.net获取当前页面的url地址

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...

  8. asp.net获取当前页面的url地址

    设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www.jb5 ...

  9. html base标签 target=_parent使用介绍

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

随机推荐

  1. Intellij IDEA实现SpringBoot项目多端口启动

    前言 有时候使用springboot项目时遇到这样一种情况,用一个项目需要复制很多遍进行测试,除了端口号不同以外,没有任何不同.这时我们强大的Intellij IDEA就能替我们实现. 实现方法 第一 ...

  2. 熔断器---Hystrix

    Hystrix:熔断器,容错管理工具,旨在通过熔断机制控制服务和第三方库的节点,从而对延迟和故障提供更强大的容错能力. 说到熔断器,先要引入另外一个词,雪崩效应. 雪崩效应,百度百科的解释是这样的: ...

  3. xml模块、项目开发过程

    一.XML模块 xml指的是可扩展标记语言,是一种定义电子文档结构和描述的语言,可以用来标记数据.定义数据类型. 什么时候用xml? 当需要自定义文档结构时,使用xml.在java中经常会使用xml来 ...

  4. 潭州课堂25班：Ph201805201 django 项目 第三十二课 后台站点管理(课堂笔记）

    一.后台站点模版抽取 1.获取静态站点模版 可以使用git clone到本地 git clone https://github.com/almasaeed2010/AdminLTE.git 也可以在g ...

  5. 潭州课堂25班：Ph201805201 爬虫高级 第十三 课 代理池爬虫检测部分 (课堂笔记)

    1,通过爬虫获取代理 ip ,要从多个网站获取,每个网站的前几页2,获取到代理后,开进程,一个继续解析,一个检测代理是否有用 ,引入队列数据共享3,Queue 中存放的是所有的代理,我们要分离出可用的 ...

  6. MySQL（四）

    分组 按照字段分组,表示此字段相同的数据会被放到一个组中 分组后,只能查询出相同的数据列,对于有差异的数据列无法出现在结果集中 可以对分组后的数据进行统计,做聚合运算 语法: select 列1,列2 ...

  7. python网络编程（十三）

    协程-greenlet版 为了更好使用协程来完成多任务,python中的greenlet模块对其封装,从而使得切换任务变的更加简单 安装方式 使用如下命令安装greenlet模块: sudo pip ...

  8. JS 私有变量

    严格来讲,JS之中没有私有成员的概念:所以对象属性都是公有的.不过,倒是有一个私有变量的概念. 任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量. 私有变量包括函数的参数 ...

  9. MySql的优化步骤

    MySql优化的一般步骤: 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以”Com”开头的指令 sho ...

  10. Exchange Online Mailbox Restoration

    User Account is already deleted in AD.User Mailbox is already deleted in Exchange. 1. Connect to Exc ...