gpt4 book ai didi

javascript - 限制 iframe 宽度

转载 作者:行者123 更新时间:2023-11-30 00:22:10 24 4
gpt4 key购买 nike

第二个问题,今天的第二个。我正在使用英特尔 SDK 在 HTML5/Javascript 中编写 Web/移动应用程序。

在解决了我之前遇到的 JSON 问题之后,我现在遇到了限制 iframe 宽度的问题 - 这看起来应该非常简单,但我显然遗漏了一些东西。

我从这样调用的 iframe 开始:

<div class="widget uib_w_6 d-margins" data-uib="media/iframe" data-ver="0">
<iframe id="myframe"></iframe>
</div>

然后我使用

document.getElementById('myframe').src = "http://URL.here" + productName;

设置 src,这工作正常。

但是,由于加载的网页大于我手机屏幕的大小,因此无论我如何尝试限制它的宽度,它都会使 iframe 达到网站要求的宽度。

理想情况下,我想将带框架的网站“压缩”到应用程序中的屏幕宽度(该应用程序是响应式大小,因为 XDK 会自动执行此操作),但我会使用可用的 iframe空间并允许我滚动框架,而不是滚动整个应用程序。

我试过:

<iframe id="myframe" width="100%"></iframe>

我试过将 100% 的宽度添加到周围的 div 中。我什至尝试在 iframe 本身和周围的 div 中将 iframe 宽度(如上所述)限制为 iphone 6 的分辨率宽度(宽度 = 370),但都不起作用 - 无论我做什么,框架,一次从上面提供它的 src,只是全尺寸并使应用程序横向滚动。

有什么想法吗?我正在阅读人们使用的技巧,这些技巧似乎通常用于嵌入 YouTube 视频...

标准道歉 - 完全菜鸟,我认为这可能比我做的更简单。

最佳答案

我不确定这是否是您要寻找的,但您可以使用 CSS3 转换来缩放元素:

<style>
.scaled {
-ms-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
width: 500px;
}
</style>

<iframe src="http://some.target.url/page" class="scaled" />

您可以找到更多信息here .

这实际上会“缩放”(或如您所说的“挤压”;))元素,使其内容变小。如果找不到始终适用于您的方案的“硬编码”值,您可能需要使用 JavaScript 计算比率。

而且,如果您愿意,您仍然可以在 iframe 本身上设置一个 width,以指定您想要的实际大小。也许您可以使用 100vw 而不是像素,以与视口(viewport)宽度的 100% 相关。

由于其中大部分是 CSS3 内容(transformvw),在使用此方法之前,您应该确保将访问该站点的浏览器支持这些功能。

关于javascript - 限制 iframe 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32742190/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com