限制iframe宽度

Restrict iframe width

本文关键字：宽度 iframe 限制      更新时间：2023-09-26

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

我试过在周围的div中添加100%的宽度。我甚至试过将iframe宽度(如上所述)限制到iphone 6的分辨率宽度(width=370)在iframe本身和周围的div中，都没有工作-无论我做什么，框架，一旦从上面提供了它的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" />

你可以在这里找到更多的信息。

这实际上会"缩放"(或"挤压")元素，使其内容更小。如果你找不到一个总是适用于你的场景的"硬编码"值，也许你需要使用JavaScript计算比率。

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

由于这大部分是CSS3的东西(transform, vw)，你应该确保浏览器将访问网站支持这些功能之前使用这种方法。

相关文章：