Twitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度答案

【问题标题】：Twitter bootstrap3: HTML5, non-cross-domain iframe scale width and heightTwitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度
【发布时间】：2013-08-19 20:10:56
【问题描述】：

我知道这已经被问过很多次了，但请继续阅读。

在bootstrap 3 中，我正在尝试获取一个 iframe 来填写一个 div。

我已经在互联网上进行了广泛的搜索，并尝试了我遇到的每一件事，但都没有运气。

这是独家新闻：

我需要在一个狭窄的 div ID 中加载一个 html 页面。它不是跨域的；我可以控制两者。
我需要能够为 iframe 中的内容设置样式。我可以从“主”页面（即目标页面）执行此操作，还是需要在“传入页面”（即 iframe 内容 html）中执行此操作？
iframe 必须灵活：高度和宽度（由于响应式设计而导致的宽度）需要根据内容扩展。

我很绝望，想知道 Bootstrap3 是否覆盖了某些东西？

结合下面列出的一长串 css 和 js 解决方案，我尝试了大量的 css 更改。

这是我尝试过的一堆东西（不是全部）：-S

【问题讨论】：

您说“您可以控制该域”，但它们是完全同一个域吗？甚至到协议？如果没有，你无能为力。
我会说是的。这可能在未来会有所改变，但现在它们是相同的。

标签： jquery html iframe twitter-bootstrap-3

【解决方案1】：

一些选项：

1：尝试使 iframe 具有响应性。 iframe 不能自动扩展，所以你必须决定一个合适的高度，或者使用 JavaScript。对于宽度，bootstrap 已经涵盖了大部分内容。您确实需要在 iframe 周围创建一个 div 来响应它。然后将 iframe 的宽度 css 设置为 100%。

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
             <h1>I'm the left column</h1>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <iframe style="width: 100%;" src="http://..." height="200px"></iframe>
        </div>
    </div>
</div>

demo

2：不要使用 iframe。如果同源，请使用$.load之类的函数。

$('#targetlocation').load('/usually_in_an_iframe.html #main_element');

3：#1 的组合和适合您链接到的高度问题的框架

【讨论】：

谢谢，我会处理这个；并作记录； Jquery 完全可以接受。
只是一个更新：我可以使用带有以下奇怪的 load()：它不能在 Chrome 本地工作，但在 FF 中工作。如果上传到服务器，它可以在 Chrome 中运行。让 iFrame 调整到宽度没有问题；高度仍然是一个主要问题。
这是一项安全功能；您无法查询带有文件 url 的文件。但是，如果您运行服务器，它将起作用。如果您使用负载，高度应该不是问题，因为没有 iframe。
是的，我收集到了。目前，我将它们视为两个独立的事物。负载工作正常，iframe 高度是一场噩梦。不过，不要放弃，我会回来报告，以防将来这对其他人有用。
更新：我让 iframe 在以下代码的帮助下调整到高度：456bereastreet.com/archive/201112/… 这将使 iframe 在整个页面时调整到 100% 高度负载。不过，下一个问题是，当 iframe 的 content 发生变化时，我无法进行高度调整。想象一下：iframe 加载正常。 iframe 内部是一个折叠，当我单击它以“下拉”折叠时，我得到了滚动条。 :-( 不放弃..

【解决方案2】：

Bootstrap 3.2 发布了一个方便的响应式 iframe 类：

http://getbootstrap.com/components/#responsive-embed

即：

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

【讨论】：