Trying to get one iframe to load before the other
Question
Upgrading an old .net project (12 years old) with latest toolkit from whoever. The whole idea is to get this project to work in latest ie browser with out having to use compatibility mode.
My latest issue is the fact that window.showModalDialog is no longer used and I have to use Jquery modal dialog. So far so good. Here is the problem. The popup.aspx had a frameset. I changed it to Iframes...a little better but here is the rub. The first frame is a dynamic pagemenu.html which is created via javascript code that is executed in the second iframe which is the content frame.
No matter what I do, the pagemenu.html is displayed before the content iframe can be displayed and call the code to create the menu bar. So the menubar is not populated.
this code is in a .js file that is called by the content page to load the popup. You can see the original opendialog commented out.
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" );
});
This code ultimately populates PopupContent.aspx which looks like this.
<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>
So the result is the popup looks like this...the close button in on there temporarily btw as I try to figure this out.
I put a border around where the MenuPage.html is suppose to be...I tried loading the ContentUrl from Page_Load and PageMenu.html from Page_PreRender...same result. Tried a bunch more stuff i found on here too but none come close.
Any suggestions? Thank you for your help.
Paul
3 answers
solution1
1 2016-01-29 19:27:30
you could always throw a postMessage to the parent frame, and load the second frame after the first.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
so the workflow would be
- container page loads
- sets url on first iframe
- first iframe sends postMessage to container
- container sets url on second frame
solution2
0 2016-01-29 19:34:19
一种选择是使用JavaScript以您需要/想要的任何顺序创建iframe（可能仍需要等待内容加载-如果对父页面的同一域基本调用上的所有页面都可以）。
solution3
0 ACCPTED 2016-02-05 00:44:15
Okay, I finally figured it out. I am using infragistics toolkit on this project and have been working on upgrade from 2008 to current for four months now. I could not get jquery to work at all as described in initial problem. So I used infragistics WebDialogWindow instead. Got the same result. However when I mixed the two problems together, ie passed my WebDialogwindow into the window.showModalDialog call, everything worked fine.
So in my parent window I had to add this modified code which leaves out the window size (window size on window.showModalDialog does not work in 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>
in the parent window this javascript was called
function addEntryDetail() {
popUpLarge("Popup.aspx?URL=ACHOriginationDetailChild.aspx%3fDSKey=<%= this.DataSetKey %>");
enableFormSubmittedFlag();
document.forms[0].submit();
}
The first line of that code is what does the work in an external js file. That code is below
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();
}
}
Notice the two calls to locate and set URL to WebDialogwindow from infragistics. Also notice I can now use window.showModalDialog passing in the infragistics WebDialogwindow as the object parameter required by the call. I can also now set the width and height from this call. Did not work before in ie11. Thus the reason for this exercise.
A link to the infragistics ticket is located here
https://www.infragistics.com/my-account/support-case/CAS-169448-M1T3N5
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.