将div扩展到iFrame的边界之外？ [英] Extend div outside bounds of iFrame?

问题描述

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

在我的例子中，我以前是在渲染一个本地的< select> ; 控制内部框架。作为本地控件，呈现时，下拉菜单可以占用iframe之外的空间。我最近将下拉列表转换为使用

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


$ b

  iframe {
溢出：可见
} b 
 
 
 $ b 
  
 
Is it possible to extend content beyond the bounds of an iframe?

In my case, I was formerly rendering a native <select> control inside of an iframe.  As a native control, when it rendered, the dropdown was able to occupy space outside of the iframe.  I recently converted the dropdown to use select2, which rebuilds the dropdown using various <span> elements.

The problem is now it gets cutoff within the <iframe>:



I've tried setting the overflow to visible, but that doesn't work:
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>


Possible Workaround:

DON'T USE IFRAMES! Yeah, I know, I know, but this is the situation I find myself maintaining.
解决方案
No. There is no way to extend content outside of an iframe. Think of it as another browser window entirely. 

The reason that the options will extend below the iframe is that form elements follow their own rules. They differ from browser to browser, and for some of the elements you can't change the styling. When you use select2 it turns the form into a regular element (not a default form element), so you can manipulate the style. Unfortunately, this also makes it confine to the iframe.

Consider that a browser can also do this (but it doesn't mean you can):



                        
这篇关于将div扩展到iFrame的边界之外？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！