Question

我正在创建一个托管游戏的网站，并且与许多网站一样，我使用漂亮的<iframe>标签从一个单独的目录中获取游戏。我试图将<iframe>的大小调整为600px宽，然后自动调整高度。

我尝试使用CSS transform属性，但是它必须是百分比，而不是像素数量。我还尝试使用Javascript获取<iframe>的滚动高度和滚动宽度，并将宽度设置为600px，同时将高度设置为内容的高度。

这是我的标记，脚本和样式表。

HTML：

<div class="game-border" id="gameBack">
<iframe src="http://superfungames.com/tetris/" class="game-frame" id="gameCont" frameborder="0" scrolling="no"></iframe>
</div>
<!-- Counteract the evil effects of centering the game-border and game-frame by using position absolute !-->
<div class="breaker" id="breaker"></div>

Javascript：

var gameBack = document.getElementById('gameBack');
var breaker = document.getElementById('breaker');
var iFrame = document.getElementById('gameCont');

var iframeWin = iFrame.contentWindow || iFrame.contentDocument.parentWindow;
var iFrameHeight = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;

iFrame.style.height = iFrameHeight + 'px';

gameBack.style.height = gameBack.scrollHeight + 25 + 'px';
gameBack.style.width = gameBack.scrollWidth + 25 + 'px';

//Counteract position absolute. Additional number is like margin-top.
breaker.style.height = gameBack.scrollHeight + 10 + 'px';

CSS：

.game-frame {
width: 600px;
height: auto;
overflow: visible;
}

.game-border {
background-color: #63d68f;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}

我希望<iframe>的宽度为600px，内容的高度为高，但是，它为600px，并且只显示内容的顶部。

Answer 1

iframe标记具有width属性，您只需添加width="{number_of_pixels}"。例如：<iframe src="{any_website_url}" widht="600"></iframe>，它将宽度设置为600px。

它应该可以在大多数网站上运行（我想），但是这不适用于您正在使用的网站。似乎它使用了一些脚本将您重定向到他们的网站，而不是将其显示在iframe中。

要解决此问题，您可以添加属性sandbox。这将阻止网站的某些功能，例如将您重定向到其网站的功能。示例：<iframe src="{any_website_url}" sandbox></iframe>。我不确定这是否会破坏游戏本身。您可以尝试进行更多调查。

您的HTML将是这样的。无需更改js文件或css文件。

<div class="game-border" id="gameBack">
    <iframe src="http://superfungames.com/tetris/" width='600' class="game-frame" id="gameCont" frameborder="0" scrolling="no" sandbox></iframe>
</div>
    <!-- Counteract the evil effects of centering the game-border and game-frame by using position absolute !-->
<div class="breaker" id="breaker"></div>

设置iFrame的比例

1 个答案:

更多信息：