0

I have an angularjs web application that loads another site within an iframe in a specified div. Internet Explorer 11 loads the angularjs + requirejs so slowly, that I need to wait for around 4 seconds till the other site's loading is triggered (iframe's src injected into the dom).

<html>
  <body>
    <div ng-app="module">
      <!-- happens after 3-4 seconds due to the delay mentioned above-->
      <div id="otherapp">
        <iframe src="https://www.bing.com">
        Another Site
        </iframe>
      </div>
    </div>
  </body>
</html>

I would like to parallelize this by going something like this instead:

<html>
  <body>
    <div id="othersite">
      <!-- loads immediately -->
      <iframe src="https://www.bing.com">
      Other Site
      </iframe>
    </div>
    <div ng-app="module">
      <!-- bring it here either using dom manipulation or css -->
      <div id="othersiteholder">
      </div>
    </div>
  </body>
</html>

Since there is an iframe, I can't move the div element using appendChild. Is there a CSS solution that can be used here as it a positioning problem? Something like:

  1. Create the otherapp div with an absolute position.
  2. The application will create an otherappholder div and leaves some position for this page.
  3. It calculates it offset and repositions the otherapp div.

While this is for an angularjs application, I am looking for a pure CSS based solution for this problem using position: absolute, position: relative etc.

Nishant
  • 20,354
  • 18
  • 69
  • 101
  • 1
    You should add a container div for both your angular app and the iframe container. Set the container to `position: relative` and the iframe to `postiion: absolute`. Then, you'll need to position `div#othersite` into `div#othersiteholder`. Using a fixed height would be easiest, but you might be able to use `height: 100%`. Not really clear though, an image or example of what you are trying to achieve would really help. – Chase DeAnda May 21 '18 at 20:36
  • Thanks, @ChaseDeAnda. You understood it correctly. That is a nice approach. I am trying to apply this idea! – Nishant May 22 '18 at 06:56

0 Answers0