Create iframe only using javascript

Question

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.

"I want to create an iframe without the one tool that will let me create an iframe". Seems legit. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 10, 2014 at 9:32
@Teemu if it's homework, it's one cruel or (more likely) ignorant teacher. — joews
– joews, Commented Jul 10, 2014 at 9: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
– Teemu, Commented Jul 10, 2014 at 10:29
Yes. I dont want to append it to document. I think I should explain my usecase properly. Let me edit the question. — Anirudhan J
– Anirudhan J, Commented Jul 10, 2014 at 10:41

joews · Accepted Answer · 2014-07-10 10:33:53Z

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.

edited Jul 10, 2014 at 10:33

answered Jul 10, 2014 at 9:33

joews

30.4k11 gold badges82 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anirudhan J Over a year ago

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.

joews Over a year ago

I'm not very familiar with that style of creating elements. Maybe this question could help? stackoverflow.com/questions/6936071/…

Teemu · Accepted Answer · 2014-07-10 11:14:24Z

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.

answered Jul 10, 2014 at 11:14

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

2 Comments

Anirudhan J Over a year ago

Edited the question. So how to create the iframe element?

Teemu Over a year ago

@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 (<frame>) 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.

Collectives™ on Stack Overflow

Create iframe only using javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related