Hello and thank you in advance for taking the time to read and answer.
I'm using a page (still under development so cannot link) that displays a massive amount of text. It's an accordion style display with a secondary and tertiary list of menus under each entry. Once the tertiary menu option is selected, the applicable text based data is displayed. Originally, there was too much going on for IE to load correctly. Had no problems in Chrome, FF, or any mobile platforms. Instead of bulk loading, switched to an iframe approach in hopes to call each element as needed.

The problems: Loads great in all non-IE still, but causing massive lag and even crashing in IE. I think IE is loading every iframe at once rather than waiting for it to be called. The formatting also becomes an issue. I cannot get the loaded iframe to resize the page appropriately. You'll see below I have the height set to 880px, setting to auto or 100% only gives me about a 100px height.


Below is essentially the first relevant chunk of the page including the first entry of the accordion.

Code:
<script type="text/javascript">
	  function resizeCrossDomainIframe(id, other_domain) {
		var iframe = document.getElementById(id);
		window.addEventListener('message', function(event) {
		  if (event.origin !== other_domain) return; // only accept messages from the specified domain
		  if (isNaN(event.data)) return; // only accept something which can be parsed as a number
		  var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
		  iframe.height = height + "px";
		}, false);
	  }
	</script>
</head>
HTML Code:
	<body>
		<div id="document" style="width:100%" >
			<div class="container"> 
				<div id="content">
					<div id="interiorPg" style="font:13px/22px Arial,serif;width:px;margin:0px;">
						<section id="main-column-only">
							<div class="parsys center-column-parsys">
								<div id="header-nav" class="section header-navigation">	
									<div class="header1" id="header1" onclick="self.postMessage(document.body.offsetHeight, '*');">
										<div class="title">
											<h1>Header 1</h1>
											<h2>Header 1 definition</h2>
										</div>
										<div class="occ">
											<iframe id="iframeheader1" name="iframeheader1" src="header1 source" frameborder=0 border=0 scrolling="auto" align="center" width="100%" height="880px" onload="resizeCrossDomainIframe('iframeheader1);"></iframe>
										</div>
									</div>
								
Any help is sincerely appreciated. Thanks! -BR89