一般来说，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. linux学习笔记 less命令

    空格 或者 ctrl+f  前进一屏     ctrl+b  后退一屏幕 回车 前进一行 /string                  查找含有string字符串的页 ?string        ...

  2. linux6.8安装docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  3. Win userAccountControl 基本属性

    userAccountControl 基本属性 属性标志 十六进制 十进制 说明 SCRIPT 0x0001 1 运行登录脚本 ACCOUNTDISABLE 0x0002 2 账户禁用 HOMEDIR ...

  4. IIS7.0提示“请求筛选模块被配置为拒绝包含双重转义序列的请求”处理办法

    请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found 解决办法: 1.单击 开始 . 在 开始搜索 框中, 键入 Notepad. 右击 记事本 , 然 ...

  5. MacOs brew 命令行安装常见工具

    brew类似ubuntu系统下的apt-get的功能 安装方法:  在Mac中打开Termal:  输入命令: ruby -e "$(curl -fsSL https://raw.githu ...

  6. [OC] 使用 cocoaPods 导入 AFNetworking

    AFNetworking的GitHub地址: https://github.com/AFNetworking/AFNetworking 假设我们建立了一个叫做AFNWlearning的工程. 1.打开 ...

  7. Urozero Autumn 2016. UKIEPC 2016

    B. Build a Boat 首先求出每块船舱的面积$S$,然后进行$m$次二分,得到每个切割线的位置. 为了计算某个切割线形成的区域的面积,需要将多边形整理成上边界和下边界,分别二分出断点位置,中 ...

  8. [POJ3614]Sunscreen (贪心)

    题意 (依然来自洛谷) 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值,太大就晒伤了,太小奶牛没感觉. 而刚开始的阳光的强度非常 ...

  9. .net缓存的应用研究（读篇）

    目前,缓存主要有两种技术:分布式缓存和进程级别的内容缓存.两种缓冲具体的差异就不废话了. 1.在技术上 数据库降压的最好方式就是缓存.在缓存的性能上,进程级别的内存缓存性能有明显优于分布式缓存,内存缓 ...

  10. mybatis查询到count（*）返回值

    resultType="int" <select id="num_List_" parameterType=" xxx" result ...