一般代码

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>
  1. 固定尺寸方案（简单直接）：选择这个方法最好
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>
  1. 响应式布局方案：
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实现更精确的尺寸控制。