在iFrame范围之外扩展div？

Question

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

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

问题是现在它在以下内容中被截止<iframe>:

我已经尝试将溢出设置为可见,但这不起作用:

iframe {
   overflow: visible
}

这是关于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!是的,我知道,我知道,但这是我发现自己维持的情况.

Answer 1

不可以.无法在iframe之外扩展内容.将其视为另一个浏览器窗口.

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

考虑一下浏览器也可以这样做(但这并不意味着你可以):