0

I am working on a slideshow implementation. We have to prefetch images for better user experience. Currently I am using hidden img tags to trigger the image load. But when a user moves say from 1st image to 80th image, the prefetch image request started for the first image doesn't get cancelled.

Using iframes we can call stop() on iframe object to stop loading the previous set of images. The norm for creating iframes using javascript appears to be 

ifrm = document.createElement("IFRAME");

I dont want to do that as I dont want my iframes to be appended to DOM. There is a HTMLFrameElement. But I am not sure how to use it.

So my question is, how to create iframes in javascript without accessing document object.

Anirudhan J
  • 2,072
  • 6
  • 27
  • 45
  • 5
    Why are you adverse to using the `document` object? – Frédéric Hamidi Jul 10 '14 at 09:30
  • 3
    "I want to create an iframe without the one tool that will let me create an iframe". Seems legit. – Niet the Dark Absol Jul 10 '14 at 09:32
  • 2
    @Teemu if it's homework, it's one cruel or (more likely) ignorant teacher. – joews Jul 10 '14 at 09:37
  • You mean you don't want to append the newly created `iframe` to the `document` rather than create the whole element without using `document` object? Partially yes, but depends on, what exactly means "`use that as an iframe`". @joews Unfortenately some teachers are. – Teemu Jul 10 '14 at 10:29
  • 1
    Yes. I dont want to append it to document. I think I should explain my usecase properly. Let me edit the question. – Anirudhan J Jul 10 '14 at 10:41

2 Answers2

3

The code you posted is the solution.

You cannot write equivalent code without using document (and why would you want to?). You need to use Javascript's interface to the DOM, which is provided through document (or window).

You can use jQuery and other DOM-aware libraries to abstract away the DOM API calls, but under the covers they all call document methods.

joews
  • 29,767
  • 10
  • 79
  • 91
  • Is there any way to create a HTMLFrameElement object and use that as an iframe? Just like how we use new Image() for creating images in javascript. – Anirudhan J Jul 10 '14 at 10:16
  • I'm not very familiar with that style of creating elements. Maybe this question could help? http://stackoverflow.com/questions/6936071/where-are-constructors-such-as-new-image-and-new-option-documented – joews Jul 10 '14 at 10:22
2

Yes, you can create an iframe to the document without appending it, but the accessibility is limited to the iframe element itself.

  • Unappended elements have not parentElement nor parentNode
  • If you'd lose the reference to iframe (ifrm in your example), the element is gone forever
  • You can't access the window within the iframe or the loaded document
  • onload event of the iframe is not fired

You can change for example src or size of an unappended iframe. And yes, the content is loaded asynchronously related to the main page.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • Edited the question. So how to create the iframe element? – Anirudhan J Jul 10 '14 at 13:03
  • @AnirudhanJ Exactly how you've done it in your example. Just store the iframes into an array instead of a bunch of variables. Though you can't create any HTMLElement without accessing `document`, since all elements are just properties in document object. HTMLFrameElement (``) is deprecated, it has been used with framesets. However, I think you've an XY-problem here, using iframes is hardly a solution to your problem. Maybe you better post a question about the original problem, with an example code. – Teemu Jul 10 '14 at 14:54