求助：配置Iframe展示指定网页区域且无滚动条的宽高边距问题

Hey there! Let's tackle your iframe issue step by step. The goal is to show only the balance and the number 2,984,000,000 from that Stellar address page, right?

First, let's talk about the limitations of using a raw iframe: due to browser same-origin policies, you can't directly manipulate the target page's DOM to hide unwanted content. So we need a workaround to "crop" the iframe to show only the section we care about.

Option 1: Crop the iframe with a container (quick fix) #

This method uses a wrapper div to hide the parts of the iframe we don't want, by adjusting the iframe's position inside the container. Here's how to do it:

1. Find the target element's position: Use your browser's dev tools (F12) to inspect the balance section on the target page. Note how far it is from the top and left edges of the page (for example, maybe it's 320px from the top and 20px from the left).
2. Use this code snippet:

<!-- Wrapper container to crop the iframe -->
<div style="width: 300px; height: 80px; overflow: hidden; position: relative; border: none;">
  <iframe 
    src="https://stellarchain.io/address/GB3O3S72Y2D25EK2BSA7VBJB5BXIAIKJZF4WIMEIQSB53TEIOIADT76L"
    style="position: absolute; top: -320px; left: -20px; width: 1200px; height: 800px; border: none;"
    scrolling="no"
  ></iframe>
</div>

Key details: #

• The outer div acts as a viewport: overflow:hidden cuts off any content outside its bounds, and we set its width/height to match the size of the balance section.
• The iframe is positioned absolutely inside the container: use negative top and left values to shift the balance section into the container's visible area. You'll need to tweak these values based on your dev tool measurements.
• scrolling="no" disables scrollbars, and border:none removes the default iframe border.

⚠️ Heads up: This method relies on the target page's layout staying the same. If stellarchain.io updates their page design, you'll need to adjust the top/left offsets again. Also, make sure the target page allows embedding via iframe (check if it has an X-Frame-Options header that blocks embedding—stellarchain.io seems to allow it, but test first!).

Option 2: Use the Stellar API (more reliable solution) #

Instead of embedding the whole page, you can fetch the balance directly using Stellar's official Horizon API. This is way more stable because it doesn't depend on the website's layout. Here's how:

<div id="balance-display"></div>

<script>
// Fetch account data from Stellar Horizon API
fetch('https://horizon.stellar.org/accounts/GB3O3S72Y2D25EK2BSA7VBJB5BXIAIKJZF4WIMEIQSB53TEIOIADT76L')
  .then(response => response.json())
  .then(accountData => {
    // Find the native XLM balance
    const xlmBalance = accountData.balances.find(balance => balance.asset_type === 'native').balance;
    // Format the number to match the 2,984,000,000 style
    const formattedBalance = parseFloat(xlmBalance).toLocaleString();
    // Render it to the page
    document.getElementById('balance-display').innerHTML = `
      <p style="font-size: 18px; font-weight: bold;">余额: ${formattedBalance} XLM</p>
    `;
  })
  .catch(error => {
    console.error('Failed to fetch balance:', error);
    document.getElementById('balance-display').textContent = '无法获取余额';
  });
</script>

Why this is better: #

• No layout dependency: even if the stellarchain.io page changes, the API data will stay consistent.
• Faster loading: you're only fetching the necessary data, not the entire page.
• Full control over styling: you can customize how the balance looks to match your site.

Final Recommendation #

Go with the API method if you can—it's more maintainable. If you absolutely need to use the iframe, adjust the top/left values in the container method until the balance section is perfectly centered in the wrapper.

内容的提问来源于stack exchange，提问作者Joey Tran