如何将div放置在屏幕中央的iFrame内

Posted 2021-05-06

我有一个放在iFrame里面的div。现在这个iFrame正好位于screeen上。

现在我需要将一个位于此框架内的div相对于窗口而不是它的容器。

html

 <FRAMESET rows="136,*" frameborder="no" framespacing="0">
    <FRAME id="cmTop" scrolling="no" src="ABC.aspx?empNo=<%=strEncrEmpNo%>" noresize>
</FRAMESET>

ABC.aspx

<div id="popUp"> 
 This is popUp div that I need to place right on the middle of the screen 
</div>

我尝试了这个位置：固定，静态，绝对但不知何故div不会出现在框架中。

div#popUp 
{
  positon:fixed;
  top:25px;
  left : 20%;
  z-index : 999999999;
}

请原谅这种结构，因为这是该死的遗留系统，没有控制去除这些框架。

任何帮助/建议高度赞赏。谢谢

答案

我不认为有一个干净的方法来做你想要的，我可以提供一些提示，但不是解决方案，希望有人会给你一个工作回合。你可以尝试通过window.parent.appendChild（）或window.parent.querySelector（'＃myDivPopup'）将弹出窗口附加到IFRAME的父窗口.innerHTML = myPopupInsideIframe但是这是一种很糟糕的方式。

在IFRAME和PARENT之间进行通信的最佳方式是window.postmessage（...）。

here an example