Jquery Twitter bootstrap3:HTML5，非跨域iframe缩放宽度和高度

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

在中，我正试图获得一个iframe来填写div

我在互联网上搜遍了很多地方，尝试了我遇到的每一件事，但都没有成功

以下是独家新闻：

我需要加载一个狭窄的div ID的html页面。它不是跨域的；两者我都有控制权

我需要能够在iframe中设置内容的样式。我可以从“母版”页面（即目标页面）执行此操作，还是需要在“传入页面”（即iframe内容html）中执行此操作

iframe必须是灵活的：高度和宽度（由于响应性设计的宽度）需要根据内容进行扩展

我绝望了，想知道Bootstrap3是否凌驾于某些东西之上

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

以下是我尝试过的一系列东西（不是全部）：-S

一些选项：

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>

---

3:Bootstrap 3.2发布了一个方便响应的iframe类，它结合了#1和适合您链接到的框架高度问题：

i、 e:

你说“你控制了这个域”，但它们是同一个域吗？甚至连协议都没有？如果没有，你也无能为力。我会说是的。这可能会改变未来的某一点，但现在它们是一样的；并记录在案;；Jquery是完全可以接受的。只是一个更新：我可以使用load（），但有以下奇怪之处：它不会在Chrome上本地工作，但可以在FF中工作。如果上传到服务器，它可以在Chrome中工作。我可以让iFrame调整到宽度；高度仍然是一个主要问题。它是一个安全特性；无法查询具有文件URL的文件。不过，如果您运行服务器，它将正常工作。如果您使用的是load，高度应该不会有问题，因为没有iFrame。是的，我收集到了。我现在把它们当作两件独立的事情。负载工作正常，如果不是噩梦的话。不过，我不会放弃，我会回来报告，以防这对将来的其他人有用。更新：我通过以下代码将iframe调整到高度：这将使iframe在整个页面加载时调整到100%的高度。不过，下一个问题是，当iframe的内容发生变化时，我无法获得高调整。想象一下：iframe加载很好。iframe内部是一个折叠，当我点击它“下拉”折叠时，我会看到滚动条-（不放弃。。

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

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