在iFrame的边界外扩展div？

Question

是否可以将内容扩展到iframe的范围之外？

在我的情况下，我以前在iframe中呈现原生<select>控件。作为本机控件，当渲染时，下拉列表可以占据iframe外部的空间。我最近将下拉列表转换为使用select2，它使用各种<span>元素重建下拉列表。

问题是现在它在<iframe>：

内被切断了

我已尝试将溢出设置为可见，但这不起作用：

iframe {
   overflow: visible
}

Here's a Test Case on Plunker

的JavaScript ：

$("#OpenSelect2").click(function(){
 OpenPagePopup("select2.html", "Select 2", 150, 400);
});

//Open Diagnosis Control for editting
function OpenPagePopup(location, title, ht, wt) {
  $('<div>')
      .append($('<iframe/>', {
          'class': "fullFrame",
          'src': location
      }))
      .dialog({
          autoOpen: true,
          modal: true,
          height: ht,
          width: wt,
          title: title
      });
}

的index.html ：

<button id="OpenSelect2">Open Modal with Select2</button>

select2.html ：

<select class="select2">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
</select>

<script >
  $('.select2').select2();
</script>

可能的解决方法：

不要使用IFRAMES ！是的，我知道，我知道，但这是situation我发现自己在维持。

Answer 1

没有。无法在iframe之外扩展内容。将其视为另一个浏览器窗口。

选项将扩展到iframe下面的原因是表单元素遵循自己的规则。它们因浏览器而异，对于某些元素，您无法更改样式。当您使用select2时，它会将表单转换为常规元素（而不是默认表单元素），因此您可以操作该样式。不幸的是，这也限制了iframe。

考虑一下浏览器也可以这样做（但并不意味着你可以）：

Answer 2

由于简短的答案是否定的，值得指出的是，并非总是需要通过iframe加载外部内容。例如，如果您使用的是PHP，则只需拨打file_get_contents($filename)即可将所需内容简单地插入当前页面。

这显然仅限于相对简单的HTML，但它肯定有其用途。