一般来说，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. 调整和删除Win7休眠文件Hiberfil.sys释放C盘

    Hiberfil.sys 是 Windows 休眠功能(Windows Hibernation)将内存数据与会话保存至硬盘.以便计算机断电重新启动后可以快速恢复会话所需的内存镜像文件.在早期版本的 W ...

  2. 事务（transaction ）

    事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 事务是恢复和并发控制的基本单位. 事务有4个特性:原子性.一致性.隔离性.持久性.(即ACID) 原子 ...

  3. python高级——垃圾回收机制

    GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来给其他对象使用.GC彻底把程序员从资源管理的重担中解放出来,让他们有更多的时间放在 ...

  4. [JOISC2014]バス通学

    [JOISC2014]バス通学 题目大意: 有\(n(n\le10^5)\)个点和\(m(m\le3\times10^5)\)条交通线路.第\(i\)条交通线路可以让你在时间\(x_i\)从\(a_i ...

  5. emacs 入门教程，菜单汉化，配置文件等杂乱文章

    首先来一发ArchWiki的Emacs简体中文的入门教程 https://wiki.archlinux.org/index.php/Emacs_(%E7%AE%80%E4%BD%93%E4%B8%AD ...

  6. React Native小白入门学习路径——四

    上一周一直在弄着老师布置的各种任务,再加上要做的都还没做完.所以上周的总结到现在才写完发出来..真的觉得老师太高估我们这些菜鸡了. 也许是我太着急了,在自己还没有足够储备去完成自己的项目,总觉得先找一 ...

  7. python 文件指针及文件覆盖

    1.文件纯净模式延伸 r+t:可读.可写 w+t:可写.可读with open('b.txt','w+t',encoding='utf-8') as f: print(f.readable()) pr ...

  8. BZOJ4963 : String

    用SAM支持往末尾在线添加字符的功能. 设$f[i][j]$表示右端点为i的每个左端点的答案,那么当$i$变为$i+1$时,在SAM的parent链形成的树中会新增一个叶子$p$. 对于每个节点,维护 ...

  9. BZOJ2042 : [2009国家集训队]Will的烦恼

    不难发现题中过程对应着动态维护关于$C$的最大生成树. 为了让$D$最大,同时让字典序最大,那么最后得到的一定是按$pair(C,D,编号)$排序的最大生成树. 对于每条非树边$(u,v,C)$,那么 ...

  10. 创建触发器(trigger)

    创建触发器 DROP TRIGGER IF EXISTS `ins_table_name`; DELIMITER ;; CREATE TRIGGER `ins_table_name` AFTER IN ...