0

编辑：下面的内容已得到回答 - 请参阅下面的问题以了解该答案产生的当前问题。

下面的代码使页面适合屏幕，我可以将 iframe 调整为我想要的任何高度或宽度，并且页面不会滚动。这就是我要的。但是，我不只是希望页面切断 iframe。我希望 iframe 拉伸/收缩以适应浏览器窗口。我怎样才能有效地实现这一目标？没有javascript可以完成吗？如果需要 javascript，请提供初学者级别的解释，或好的教程链接；我是 JS 新手。

这是我到目前为止所拥有的：

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>

<body>
    <div class="wrapper">
        <iframe id="myIframe" src="https://#.com" border="0" scrolling="no" frameborder="0">    
        </iframe>
    </div>
</body>
</html>

CSS：

body, html {
    margin: 0;
    padding: 0;
}
.wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
}

编辑！碰巧我想在 iframe 中使用的这个特定页面在 url 本身中提供了一个非常有趣的控制功能！url 允许大小控制。所以这导致我提出一个新问题，其中涉及使用 javascript。我的新问题是这样的：

我可以使用某种 JS 脚本来利用 url 中的大小控制吗

<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&amp;width=1280&amp;height=1280&amp;secure=true&amp;key=0202f0ddb5a3458aabf520e5ab790ab9&amp;"

动态强制 iframe 内容的大小匹配用户的浏览器窗口？

这将把我原来问题的解决方案与辅助解决方案结合起来，为我的问题提供完美的解决方案。

（我的目标实际上是将这个 Twitch 提要作为我网页的背景 - 调整 iframe 的实际内容的大小实际上是一种非常不可能但似乎可能是额外的享受！）

4

2 回答 2

0

我认为您尝试完成的工作可以通过以下游览 CSS 来完成

#myIframe {
    height: 100%;
    width: 100%
}
于 2013-09-16T05:20:52.933 回答
0

如果您试图拉伸 iframe 的内容，那么......

您将必须编写 css 来为 iframe 文档中的所有元素提供成比例的高度和宽度

如果 iframe href 不是来自您的域，则无法实现此目的。

总的来说，没有办法拉伸页面的内容，让所有的东西在没有滚动条的情况下都在屏幕上可见。

于 2013-09-16T05:21:39.300 回答