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

Posted 2023-05-07

【中文标题】将 div 扩展到 iFrame 的边界之外？

【英文标题】：Extend div outside bounds of iFrame?

【发布时间】：2015-09-13 22:01:35

【问题描述】：

是否可以将内容扩展到 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。

【参考方案1】：

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

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

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

【讨论】：

我同意“IFrame（内联框架）是嵌入在网站上另一个 HTML 文档中的 HTML 文档。”

嗯，我也很害怕，但在我检查之前我不愿意接受我的命运。

【参考方案2】：

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

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

【讨论】：

是的，这将是大多数人的最佳解决方案。我did include that 是我最初的问题中最明显的解决方法，但有足够多的人可能会向右滚动到可能值得包括在此处的答案。

感谢您的回复。我看到你提出了这一点，但我认为值得指定如何以通常可行的方式完成。否则，听起来你只是在告诉人们放弃！