jquery - Twitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度

Question

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

在bootstrap 3中，我试图让一个 iframe 来填写一个 div。

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

这是独家新闻：

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

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

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

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

• Twitter Bootstrap iFrame 用法？
• 在 Twitter 引导流体布局中调整 iframe 大小的正确方法是什么？
• http://bootply.com/search?kw=iframe
• 将 iframe 内容高度设置为动态自动调整大小
• 使 iframe 适合容器剩余高度的 100%
• 跨域 iframe 调整大小？
• 使 iframe 适合其内容高度

Answer 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>

演示

2：不要使用 iframe。如果它位于同一来源，请使用类似$.load的函数。

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

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

Answer 2

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

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

IE：

<!-- 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>