时间戳

首页 > 解决方案 > 我正在尝试显示我使用其类名定位的 Iframe 的某个部分

javascript - 我正在尝试显示我使用其类名定位的 Iframe 的某个部分

问题描述

我试图弄清楚是否有办法在另一个网站的 Iframe 中定位特定的类名，所以我只能显示 BTC 的当前价格。我不知道这是否可能，或者是否有办法以某种方式获取目标类的 .value 。希望有人可以提供帮助，我很感激。

<!DOCTYPE html>
<html>
<body>

  <div>
     <iframe id="price" src="" frameborder="0"></iframe>
  </div>

<script>

const price = document.getElementById("price");
price.style.width = "400px";
price.style.height = "400px";
price.src = "https://blockfolio.com/coin/BTC";
price.contentWindow.document.getElementsByClassName("PriceFlasher__PriceFlasherWrapper-sc-14r4saj-0 gOyVu");

</script>

</body>
</html>

标签： javascripthtml

解决方案

很可能是不可能的，因为 iframe 具有阻止您从其他域访问文档的安全策略。此外，这可能是一个坏主意 - 类名以结尾的事实sc-14r4saj-0 gOyVu意味着它很可能是捆绑的，并且当他们部署新版本时，类名会改变（破坏你的应用程序）。不确定 blockfolio 是否有 API，但这可能是您想要做的，例如：

可能更好的解决方案是：

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
const priceEl = document.getElementById('price');
let priceFloat;
const update = async () => {
    const resp = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
    const json = await resp.json();
    if (priceFloat !== json.bpi.USD.rate_float) {
        const color = priceFloat && priceFloat < json.bpi.USD.rate_float ? 'red' : 'green';
        priceFloat = json.bpi.USD.rate_float;
        const money = formatter.format(json.bpi.USD.rate_float);
        price.innerHTML = money;
        price.style.color = color;
        setTimeout(() => price.style.color = null, 500);
    }
}
update();
setInterval(update, 5000);
<div id="price"></div>

推荐阅读