javascript - 限制 iframe 宽度

Question

第二个问题，今天的第二个。我正在使用英特尔 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 视频...

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

Answer 1

我不确定这是否是您要寻找的，但您可以使用 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 内容(transform、vw)，在使用此方法之前，您应该确保将访问该站点的浏览器支持这些功能。