一般来说，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. 一个小demo 实用selenium 抓取淘宝搜索页面内的产品内容

    废话少说,上代码 #conding:utf-8 import re from selenium import webdriver from selenium.webdriver.common.by i ...

  2. 在Node.js使用Promise的方式操作Mysql（续）

    在之后的开发中,为了做一些事务开发,我把mysql的连接代码从之前的query函数中分离出来了,直接使用原生的方法进行操作,但发现还是有点问题 原因是原生的node-mysql采用了回调函数的方式,同 ...

  3. LOJ.6053.简单的函数(Min_25筛)

    题目链接 Min_25筛见这里: https://www.cnblogs.com/cjyyb/p/9185093.html https://www.cnblogs.com/zhoushuyu/p/91 ...

  4. Spring使用笔记（三） 高级装配

    高级装配 一.环境与Profile 一)配置profile bean 环境的改变导致配置改变(需求:通过环境决定使用哪个bean),可以通过Spring的Profile解决. Profile可以在程序 ...

  5. 上海交大ACM总教头俞勇讲述“最聪明人的故事”

    这是一场世界大学生之间"最强大脑"的较量:这是拥有数十年历史的ACM国际大学生计算机程序设计大赛的赛场:斯坦福.加州理工.麻省理工.哈佛--当一个又一个在计算机科学领域拥有世界顶尖 ...

  6. JavaScrip两个函数的设置为回调

    1.javascript异步编程之回调函数 function fn2(data){ alert(data) } function fn1(callback){ var data = 12+1; cal ...

  7. Linq.js表达式常见写法

    1.回调函数法 2.lambda表达式字符串 3.$符号的表达式

  8. flask内容

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  9. C_狐狸和兔子的故事

    题目描述 围绕着山顶有10个洞,一只狐狸和一只兔子各住一个洞.狐狸总想吃掉兔子.一天兔子对狐狸说:“你想吃我有一个条件,先把洞从1-10编上号,你从10号洞出发,先到1号洞找我:第二次隔1个洞找我,第 ...

  10. .NET项目引用黄色小三角以及找不到依赖的解决方法

    上图,问题描述: 经过查证,这个是引用的项目框架版本和本项目框架版本不一致的症状. 解决办法: 点击项目右键属性,调整版本使两个项目的版本一致 问题解决.good! ----------------- ...