javascript - 使用 facebook 网络托管作为 Canvas 页面时,为什么我的资源没有被加载?

标签 javascript html facebook canvas

我使用 Facebook 网络托管来存储我的 Canvas 游戏资源,当它们尝试加载时,我不断收到 404 错误。

我的index.html 文件加载正确。我的资源都是相对于我的 index.html 文件加载的,该文件位于根目录中。

我上传的 zip 文件的结构如下:

enter image description here

以下是当我尝试在 facebook 中加载 Canvas 页面时在控制台中收到的错误;所有 404:

enter image description here

这是index.html 文件...

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <meta charset="utf-8" />
    <title>Title Here</title>
    <link rel="stylesheet" type="text/css" href="/styles/main.css">
    <link rel="stylesheet" href="lib/flexboxgrid.min.css">
</head>
<body>    
    <div id="canvasContainer"></div>
    <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>    
    <script src="lib/pixi.min.js"></script>        
    <script src="lib/jquery.min.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

似乎资源根本没有上传。

在查看开发工具网络选项卡后,我还注意到我的index.html是从https://apps-<acc_key>.apps.fbsbx.com/bundle/<randomnumbers>/<more random numbers>/index.html?signed_request=.....加载的。位置。

但是,我的其他资源没有 'bundle/<randomnumbers>/<more random numbers>/'除了他们的地址位置之外。我尝试直接在浏览器中加载资源,但收到 403 Denied 错误。我什至尝试附加signed_reqeust token ,但也没有成功;同样的 403 错误。

最佳答案

大部分问题来自<base href="/" /> tag

虚拟主机 Documentation

It's very important that the generated index.html file is located at the root of the zip file, as this is the only place we can launch the content. All other URLs need to be a relative path.

<小时/>

正确相对网址

<link href="styles.css" rel="stylesheet"/>  
or
<link href="./styles.css" rel="stylesheet"/>

结果网址将采用以下格式:

https://apps-<app id>.apps.fbsbx.com/bundle/<another id>/<another id>/styles.css
<小时/>

不正确绝对网址

<link href="/styles.css" rel="stylesheet"/>

https://apps-<app id>.apps.fbsbx.com/styles.css
<小时/>

当你使用<base href="/" />时HTML 元素指定用于文档中包含的所有相对 URL 的基本 URL。所以基本上你使用绝对路径,当你应该依赖 facebook 网络托管来解析路径时

所以改变/styles/main.cssstyles/main.css并删除 <base href="/" />

关于javascript - 使用 facebook 网络托管作为 Canvas 页面时,为什么我的资源没有被加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44148974/

相关文章:

javascript - 是否使用 Promise 或通过 $http 调用延迟

html - 搜索按钮固定不动

html - 使用-webkit-overflow-scrolling 安全吗?

javascript - 向孙子添加事件处理程序

facebook - "The access token does not belong to application"尝试生成长期访问 token

javascript - 使用 Facebook javascript sdk 获取最新 5 条状态更新

php - Facebook graph api 给出了空的点赞结果

javascript - Jquery 日期选择器 - 想要在输入字段中显示日期

javascript - 在 AJAX 调用成功响应时将数据推送到数组中会导致多次附加最后一个数据

javascript - React Native渲染函数给出错误: Unexpected token