能够通过内容的 url 控制 iframe 大小的内容 - javascript 来利用这一点

Capability to control content of the iframe size through the content's url - javascript to take advantage of this

本文关键字：javascript 这一点 控制 url iframe      更新时间：2023-09-26

编辑：下面的内容已经得到解答 - 请参阅下面的问题，了解该答案引起的当前问题。

下面的代码使页面适合屏幕，我可以将 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 本身中提供了一个非常有趣的控制功能！网址允许大小控制。因此，这让我提出了一个新问题，涉及使用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 的实际内容大小实际上不太可能，但似乎可能在这里额外处理！

我认为您尝试完成的工作可以在tour CSS中使用以下内容来完成

#myIframe {
    height: 100%;
    width: 100%
}

如果你试图扩展iframe的内容，那么.....

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

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

总体而言，没有办法拉伸页面的内容，以便在没有滚动条的情况下在屏幕上看到所有内容。

相关文章：