试图让一个iframe在另一个之前加载

时间:2016-01-29 19:23:53

标签: javascript c# jquery iframe

使用最新的工具包升级旧的.net项目(12岁)。整个想法是让这个项目在最新的浏览器中工作,而不必使用兼容模式。

我最近的问题是不再使用window.showModalDialog,我必须使用Jquery模式对话框。到现在为止还挺好。这是问题所在。 popup.aspx有一个框架集。我把它改成了Iframes ......好一点但是这里就是摩擦。第一帧是动态pagemenu.html,它是通过javascript代码创建的,该代码在第二个iframe(内容框架)中执行。

无论我做什么,都会在显示内容iframe之前显示pagemenu.html并调用代码来创建菜单栏。所以菜单栏没有填充。

此代码位于.js文件中,内容页面调用该文件以加载弹出窗口。你可以看到原来的opendialog被注释掉了。

function popUpLarge(URL) {
window.TimerID = timerID; // Enables the popuP dialog disable the parent windows timer.
window.RefreshFunctionPointer = RefreshSessionTimer; // Enables the popuP dialog enable the parent windows timer.
//var setDirty = window.showModalDialog(URL, window, "resizable:1;dialogWidth:775px;dialogHeight:575px;center:1;dialogHide:1;edge:sunken;status:0;unadorned:1;help:0");
$(document).ready(function() {
    $("#dialog").empty();
    $("#dialog").append($("<iframe id='popup'  width='770' height='520'/>").attr("src", URL))
    .dialog({
        autoOpen: false,
        position: { my: 'left', at:'left'},            
        draggable: true,
        width : 775,
        height : 525,            
        modal : true           
     });  
    $( "#dialog" ).dialog( "open" );
});    

此代码最终会填充PopupContent.aspx,如下所示。

<body><form>
            <iframe id="PageMenuFrame" width="100%" height="20" src="<%= this._PageMenu %>" scrolling="no" frameborder="1"></iframe><br />
            <iframe id="PageContentFrame" width="100%" height="90%" src="<%= this._ContentUrl %>"  scrolling="auto" frameborder="0"></iframe>
        </body> </form>       

所以结果是弹出窗口看起来像这样......当我试图想出这个时,暂时关闭按钮。 enter image description here

我在MenuPage.html假设的位置附近设置了边框...我尝试从Page_PoRender和PageMenu.html从Page_PreRender加载ContentUrl ...同样的结果。我在这里尝试了更多的东西,但没有一个接近。

有什么建议吗?谢谢你的帮助。

3 个答案:

答案 0 :(得分:1)

你总是可以将postMessage抛给父框架,并在第一帧之后加载第二帧。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

所以工作流程将是

  1. 容器页面加载
  2. 在第一个iframe上设置网址
  3. 第一个iframe将postMessage发送到容器
  4. 容器在第二帧上设置网址

答案 1 :(得分:0)

一种选择是使用JavaScript以您需要/想要的顺序创建IFrame(可能仍需要等待加载内容 - 如果同一域上的所有页面基本调用父页面都可以)。

答案 2 :(得分:0)

好的,我终于明白了。我正在使用这个项目的infragistics工具包,并且从2008年开始升级至现在的四个月。正如初始问题中所描述的那样,我根本无法使jquery工作。所以我使用了infragistics WebDialogWindow。得到了相同的结果。但是,当我将两个问题混合在一起时,即将我的WebDialogwindow传递给window.showModalDialog调用时,一切正常。

所以在我的父窗口中,我不得不添加这个修改后的代码,这样就省去了窗口大小(window.showModalDialog上的窗口大小在ie11中不起作用。

<div >
            <ig:WebDialogWindow ID="WebDialogWindow1" runat="server"
                Modal="true" Moveable="true" WindowState="Hidden" InitialLocation="Manual"  >
                <Header CloseBox-Visible="true" MaximizeBox-Visible="false" MinimizeBox-Visible="false">
                <MaximizeBox Visible="false"></MaximizeBox>
                <MinimizeBox Visible="false"></MinimizeBox>
                <CloseBox Visible="true"></CloseBox>
            </Header>
                <ContentPane ScrollBars="Hidden" FrameScrolling="False" >
                    <Template>  

                    </Template>  
            </ContentPane>
            </ig:WebDialogWindow> 
        </div>  

在父窗口中,这个javascript被称为

function addEntryDetail() {              
            popUpLarge("Popup.aspx?URL=ACHOriginationDetailChild.aspx%3fDSKey=<%= this.DataSetKey %>");
            enableFormSubmittedFlag();
            document.forms[0].submit();              
        }   

该代码的第一行是外部js文件中的工作。该代码位于

之下
function popUpLarge(URL) {
window.TimerID = timerID; // Enables the popuP dialog disable the parent windows timer.
window.RefreshFunctionPointer = RefreshSessionTimer; // Enables the popuP dialog enable the parent windows timer.

var webDialog = $find("WebDialogWindow1");    
webDialog.get_contentPane().set_contentUrl(URL)
var setDirty = window.showModalDialog(URL, webDialog, "resizable:1;dialogWidth:775px;dialogHeight:500px;center:1;dialogHide:1;edge:sunken;status:0;unadorned:1;help:0;scroll:0");


if (setDirty == true) {
    setFormDirty();
}

}

注意两次调用,从infragistics定位并设置WebDialogwindow的URL。另请注意,我现在可以使用window.showModalDialog传递infragistics WebDialogwindow作为调用所需的对象参数。我现在也可以通过此调用设置宽度和高度。在ie11之前没有工作。因此这个练习的原因。

指向infragistics票证的链接位于此处

https://www.infragistics.com/my-account/support-case/CAS-169448-M1T3N5