将 div 扩展到 iFrame 的边界之外？

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>

可能的解决方法：

不要使用框架！是的，我知道，我知道，但这是我自己维护的situation。

Answer 1

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

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

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

Answer 2

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

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