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

Question

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

就我而言，我以前在 iframe 中呈现本机 <select> 控件。作为本机控件，当它呈现时，下拉菜单能够在 iframe 之外占据 space。我最近将下拉列表转换为使用 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>

可能的解决方法：

不要使用 IFRAME！是的，我知道，我知道，但这就是我发现自己维护的 situation。

Answer 1

没有。无法将内容扩展到 iframe 之外。完全可以将其视为另一个浏览器 window。

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

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

Answer 2

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

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

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

Extend div outside bounds of iFrame?

html

css

iframe

overflow

jquery-select2

Here's a Test Case on Plunker

可能的解决方法：