Javascript 设置iFrame的比例

我正在创建一个网站来托管游戏，和许多人一样，我使用奇妙的

标签从一个单独的目录中获取游戏。我试图让

将其自身大小调整为600px宽，并让高度自动调整

我尝试过使用CSS

transform

属性，但它必须是百分比，而不是像素数量。我还尝试使用Javascript获取

的滚动高度和滚动宽度，并将宽度设置为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>

CSS:

---

我希望

的宽度是600px，内容的高度是高的，但是，它是600px，并且只显示内容的最顶端。

iframe标记计数时带有一个width属性，您只需要添加

width=“{number\u of_pixels}”

。示例：

，这将宽度设置为600px

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

要解决此问题，您可以添加属性

沙盒

。这将阻止网站的某些功能，例如将您重定向到其网站的功能。示例：

。我不确定这是否会破坏游戏本身。你可以试着做更多的调查

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

---

iframe标记使用宽度属性计数，您只需添加

width=“{number\u of_pixels}”

。示例：

，这将宽度设置为600px

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

要解决此问题，您可以添加属性

沙盒

。这将阻止网站的某些功能，例如将您重定向到其网站的功能。示例：

。我不确定这是否会破坏游戏本身。你可以试着做更多的调查

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

你在使用引导吗？@Dat-Boi-Trump-noa你在使用引导吗？@Dat-Boi-Trump-No

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';

.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;
}