我目前正在使用 ipfs 和 Pinata 等固定服务的网站上工作。 我的最后一个构建在本地或通过公共网关交付时完美无缺。 当试图将我的最后一个构建固定到 Pinata 时，我被告知我不能使用内联 JS。 所以我的下一个构建包含一个名为 app.js 的外部 JS 文件。 我将此文件存储在与我的 HTML 文件 (index.html) 相同的文件夹中，并在固定在 Pinata 上之前上传到 IPFS 以进行测试。 我这辈子都无法让这个新版本正常工作。无论我如何尝试调用 .js 文件路径，我每次都得到 400s 或 500s。
<script type="text/javascript" src="app.js"></script>
这是我用来调用文件的行。我边走边学，所以我对权限或其他可能导致此 .js 文件无法恢复的问题了解不够。 在这一点上，代码库仍然非常简单，我确信我遗漏了一些非常明显且被忽视的东西。任何帮助将不胜感激！
最后构建（内联脚本）示例：LootCache.app
我已经尝试（使用新版本）我能想到的每个文件路径，但似乎没有任何效果。我相信 JS 代码本身是有效的，因为我只是使用了最后的构建并将其外部化。我也知道至少大部分 HTML 在页面填充后都在工作。唯一不起作用的是按钮和按下按钮时返回的数据。
HTML :
<!DOCTYPE html>
<html>
<head>
<title>LootCache</title>
<script type="text/javascript" src="app.js"></script>
<style>
body {
background-color: black;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
border: 5px solid gold;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
overflow: auto;
}
h1 {
font-size: 50px;
font-weight: bold;
color: gold;
margin: 10px 0;
display: flex;
align-items: center;
}
.input-container {
background-color: white;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
max-width: 800px;
}
input[type=text] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
margin-bottom: 10px;
}
button {
background-color: gold;
color: black;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.response {
color: gold;
font-size: 20px;
margin-top: 10px;
word-wrap: break-word;
text-align: center;
}
img {
display: block;
max-height: calc(100vh - 300px);
margin: 10px auto;
object-fit: contain;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src="https://ipfs.io/ipfs/QmXjtBuhfDRZfTXZjF2dpJ4mSnmjj5RPow4qMY5X6ZQ6QU?filename=LootCache-1.png" alt="LootCache">
<h1></h1>
<div class="input-container">
<label for="ethAddress">Enter Ethereum Address (No ENS):</label>
<input type="text" id="ethAddress" name="ethAddress" placeholder="0x...">
<button id="checkBalanceBtn">Check Your Stash!</button>
</div>
<div class="response" id="response"></div>
</div>
</body>
</html>
JavaScript：
window.onload = function() {
async function getBalance(address) {
const response = await fetch(`https://mainnet.infura.io/v3/fb3bba54ae0449c28400a4e28fb61e6c?module=account&action=balance&address=${address}`);
const data = await response.json();
return data.result;
}
function displayAddress() {
var address = document.getElementById("ethAddress").value;
var provider = new Web3.providers.HttpProvider("https://mainnet.infura.io/v3/fb3bba54ae0449c28400a4e28fb61e6c");
var web3 = new Web3(provider);
web3.eth.getBalance(address, function(error, balance) {
if (error) {
document.getElementById("response").innerHTML = "Error: " + error.message;
} else {
var balanceInEther = web3.utils.fromWei(balance, "ether");
var formattedBalance = parseFloat(balanceInEther).toFixed(4);
document.getElementById("response").innerHTML = "Address: " + address + "<br>Balance: " + formattedBalance + " ETH";
}
});
}
}
您是否在
localhosthttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
固定。这是不正确的文件路径和“延迟”属性的组合。更正路径后，按钮仍然不起作用，但加载了 .js。然后在 js 文件调用之前添加“延迟”& 和额外的 web3 脚本调用，以确保在调用脚本之前建立 web3 连接