Question

在iframe中嵌入Bootstrap应用程序时，模式对话框始终在iframe顶部打开，而不是在屏幕顶部打开。例如，转到http://getbootstrap.com/javascript/并在页面上打开示例模式。然后使用下面的示例代码将相同的引导页面放在iframe中，找到一个模态并打开它：

<html>
    <head>
    </head>
    <body>
        <table width="100%">
            <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
            <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
                <td valign="top">
                    <iframe width="100%" height="10000px" 
                        scrolling="no" src="http://getbootstrap.com/javascript/">
                    </iframe>
                </td>
            </tr>
        </table>
    </body>
</html>

Demo in fiddle

在这种情况下，如何在屏幕上定位模态？

更新：不幸的是，我的iFrame无法填满屏幕，也无法修复它，因为它需要融入页面的其余部分并且页面本身有足够的内容可以滚动。这不是我的设计，我最终打算重做整件事，但这是我现在必须解决的问题。作为临时选项，我使用javascript告诉iframe父级滚动到模式对话框弹出的顶部。虽然这是可以接受的，但这不是理想的行为。

我在我的代码中使用angularjs和ui-bootstrap库，但正如您在上面所看到的，这是一个引导问题。

Answer 1

这是大多数浏览器中的错误（IE看似很好），其中元素固定到iframe，而不是窗口。通常，如果您需要某些内容相对于主文档，则必须位于主文档中。

解决方法是将iframe包装在占据屏幕整个宽度的固定位置div中，然后在其中最大化iframe。这似乎解决了问题

<强> HTML ：

<div class="fixframe">
    <iframe src="http://getbootstrap.com/javascript/"></iframe>
</div>

<强> CSS ：

.fixframe {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;    
} 
.fixframe iframe {
   height: 100%;
   width: 100%;  
}

Working Demo in fiddle

另见：

Answer 2

很老的问题，但是我没有找到解决方案/解决方法。将来对某人可能会有帮助。

我遇到了同样的问题-我的iFrame不能填满整个屏幕，它会显示引导程序的模式，并且正在从不同于父页面的域中加载内容。

TL; DR

使用window.postMessage() API-Documentation here。用于父级和iframe（跨域）之间的通信
通过iScroll的currentScrollPosition和Y位置传递消息
隐性消息并从顶部更新模式的填充

在我的情况下，解决方法是使用window.postMessage() API-Documentation here。它需要向父级添加一些额外的代码并处理iFrame中的消息。

您可以添加EventListener并侦听“滚动”事件。每次调用事件处理函数时，您都可以获得document.scrollingElement.scrollTop之类的currentScrollPosition。请记住，您的iframe可以在父页面的顶部有一定的页边距，因此您也应该获得其“偏移”。之后，您可以将这两个值发布到iframe中，例如ncp_iframe.contentWindow.postMessage(message, '*');

请注意，message必须是字符串值

在那之后，您需要在iFrame中添加EventListener并侦听“消息”事件。事件处理功能将在event.data属性中传递您的“消息”。有了它，您可以更新模式填充。（如果您不使用动画，例如在类中淡入淡出，效果会更好）；

快速示例：

父母：

window.addEventListener('scroll', function(event){
  var myIframe = document.querySelector('#myIframe');
  var topOffset = myIframe.getBoundingClientRect().top + window.scrollY;
  var currentScroll = document.scrollingElement.scrollTop;
  myIframe.contentWindow.postMessage(topOffset + ':' + currentScroll, '*');
});

iFrame：

window.addEventListener('message', function(event) {
  var messageContent = event.data.split(':');
  var topOffset = messageContent[0];
  var currentScroll = messageContent[1];

  //calculate padding value and update the modal top-padding

}, false);

Answer 3

这是因为课程.modal具有position: fixed属性。请改为position: relative。

无论滚动位置如何，iframe顶部的Bootstrap模态。我如何在屏幕上定位？

3 个答案:

Working Demo in fiddle