一般来说，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. XamarinEssentials教程获取首选项的值

    XamarinEssentials教程获取首选项的值 如果开发者想要获取首选项中某一项的值时,可以使用Preferences类的Get()方法实现,该方法可以对指定键的值进行获取.该方法有12种形式, ...

  2. XamarinSQLite教程在Xamarin.Android项目中提取数据库文件

    XamarinSQLite教程在Xamarin.Android项目中提取数据库文件 由于不能直接打开该文件,开发者需要先将数据库文件从Android系统中提取出来.操作步骤如下. (5)选择MyDoc ...

  3. 洛谷.4655.[CEOI2017]Building Bridges(DP 斜率优化 CDQ分治)

    LOJ 洛谷 \(f_i=s_{i-1}+h_i^2+\min\{f_j-s_j+h_j^2-2h_i2h_j\}\),显然可以斜率优化. \(f_i-s_{i-1}-h_i^2+2h_ih_j=f_ ...

  4. Hibernate关联关系之多对多

    多对多映射关系 建立多对多单向关联关系 创建Employee类: public class Employee { private Integer empid; //员工编号 private Strin ...

  5. 最近公共祖先 LCA 倍增算法

          树上倍增求LCA LCA指的是最近公共祖先(Least Common Ancestors),如下图所示: 4和5的LCA就是2 那怎么求呢?最粗暴的方法就是先dfs一次,处理出每个点的深度 ...

  6. BZOJ4739 : 定向越野

    起点/终点向每个圆的切点连边. 任意两个圆的公切点之间连边. 同一圆上相邻两个关键点之间连边. 然后Dijkstra求最短路即可,时间复杂度$O(n^3)$. 注意判边可行性的时候要忽略这条边来源的圆 ...

  7. [P4994]终于结束的起点 (递推)

    终于结束的起点 终于写下句点 终于我们告别 终于我们又回到原点 …… 一个个 OIer 的竞赛生涯总是从一场 NOIp 开始,大多也在一场 NOIp 中结束,好似一次次轮回在不断上演. 如果这次 NO ...

  8. Linux之nginx反向代理+三台web+nfs共享存储实现集群配置

    作业四:nginx反向代理+三台web+nfs共享存储实现集群配置 在各个web服务器上挂载nfs [root@localhost nginx]# mount -t nfs 192.168.152.1 ...

  9. linux之测试硬盘速度篇

    作业三:dd命令测试硬盘速度 [root@localhost 桌面]# dd if=/dev/sdc2 of=/a.txt bs=2M count=2 记录了0+1 的读入 记录了0+1 的写出 10 ...

  10. JAVA自学笔记25

    JAVA自学笔记25 1.GUI 1)图形用户接口,以图形的方式,来显示计算机操作的界面,更方便更直观 2)CLI 命令行用户接口,就是常见的Dos,操作不直观 3) 类Dimension 类内封装单 ...