一般代码

1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://geekprank.com/hacker/" 
    scrolling="true" 
    border="0" 
    frameborder="true" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

要让嵌入的网页内容完整显示在iframe中，建议采用以下方案：

  1. 动态调整高度方案（推荐）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div align=center class="aspect-ratio">
        <iframe src="https://jishiqi-evx.pages.dev/" 
                scrolling="no" 
                border="0" 
                frameborder="0" 
                framespacing="0" 
                allowfullscreen="true"
                id="dynamic-iframe">
        </iframe>
    </div>

    <script>
    document.getElementById('dynamic-iframe').onload = function() {
        this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';
        this.style.width = this.contentWindow.document.documentElement.scrollWidth + 'px';
    };
    </script>

  2. 固定尺寸方案（简单直接）：选择这个方法最好

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div align=center>
        <iframe src="https://jishiqi-evx.pages.dev/" 
                scrolling="auto" 
                border="0" 
                frameborder="0" 
                framespacing="0" 
                width="100%" 
                height="800px"
                allowfullscreen="true">
        </iframe>
    </div>

  3. 响应式布局方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div style="position: relative; padding-top: 56.25%;"> <!-- 16:9比例 -->
        <iframe src="https://jishiqi-evx.pages.dev/" 
                scrolling="no" 
                border="0" 
                frameborder="0" 
                framespacing="0" 
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
                allowfullscreen="true">
        </iframe>
    </div>

注意事项：

  1. 动态方案需要目标页面支持跨域通信（如果同源则无需处理）
  2. 固定尺寸方案需要根据实际内容调整高度
  3. 响应式方案会保持16:9比例，适合视频类内容
  4. 建议保留allowfullscreen属性以支持全屏功能
  5. 如果内容包含动态加载部分，可能需要添加MutationObserver来持续调整高度

推荐使用第一种动态方案，它可以根据内容自动调整尺寸，实现无滚动条完整显示。如果内容包含复杂交互或动态加载元素，建议结合ResizeObserver API实现更精确的尺寸控制。