0

How do you select the iframe DOM Object on the page if you know the iframe's ID? Assume there might be multiple iframes on the page and you don't know the position of the one in question, and also no jQuery solutions please. I came up with the following, however, I expect it can be much more trivial.

EDIT. I am trying to get the DOM object, so that I can access properties such as window.frames[0].innerHeight

function getIframe(id) {
    var iframe=null;
    for (var i = window.frames.length - 1; i >= 0; i--) {
        if(window.frames[i].frameElement.id==id){iframe=window.frames[i];break;}
    }
    return iframe;
}
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • @RGraham What do you mean? – user1032531 Oct 24 '13 at 12:29
  • I am looking for the object that represents the iframe. For instance, `window.frames[0]` will return the object for the first iframe on the page. `document.getElementById("myIFrame")` and `window.frames['myIFrame']` on the other hand will return the HTML of the iframe. Sorry if my description uses improper nomenclature as iframes are still new to me. Thank you – user1032531 Oct 24 '13 at 12:34

2 Answers2

1

See this answer:

Access iframe elements in JavaScript

window.frames['myIFrame']

EDIT:

I made some tests on FF and Chrome and came up with the following conclusions.

window.frames["myFrame"] returns:

    `[object HTMLIFrameElement]` when on FF (v24)
    `[object Window]` when on Chrome (v 30.0.1599.101)

we can make a control like this for HTMLIFrameElement property contentWindow to get the iframe Window:

var myFrame = (window.frames["myFrame"].contentWindow ? window.frames["myFrame"].contentWindow : window.frames["myFrame"])

This way in the variable myFrame is stored the Window object.

If now we want to get the DOM element HTMLIFrameElement we can simply do:

var domElement = myFrame.frameElement

Hope this will be useful.

Community
  • 1
  • 1
Jonathan
  • 738
  • 8
  • 22
  • This is the same as `document.getElementById("myIFrame")`. I am trying to get the DOM object. Sorry for being unclear. – user1032531 Oct 24 '13 at 12:42
  • Maybe I am missing something, but doesn't it show innerHeight as undefined in your example? Please see http://jsfiddle.net/VQ5ar/2/ – user1032531 Oct 24 '13 at 13:05
  • @user1032531 Sorry tested in Chrome only...check this, here you have the DOM Object [http://jsfiddle.net/VQ5ar/4/](http://jsfiddle.net/VQ5ar/4/). It works in Chrome and Firefox, IE not tested. And for more info on HTMLIFrameElement see [https://developer.mozilla.org/en/docs/Web/API/HTMLIFrameElement](https://developer.mozilla.org/en/docs/Web/API/HTMLIFrameElement) – Jonathan Oct 24 '13 at 13:23
  • I am still not getting the correct results. Please see http://jsfiddle.net/VQ5ar/10/. – user1032531 Oct 24 '13 at 13:53
  • @user1032531 If you want the innerHeight or something else check documentation, your question title is "Get iframe of given ID", specifying you need the DOM Object and you have the answers. You only have to choose the best one. If you want to get elements inside iframe or something else ask a new question for the specific needs. – Jonathan Oct 24 '13 at 14:00
  • How should I phrase the question if I want the equivalent of `window.frames[0]`, but not by specifying the order in the list, but by specifying the ID? That is what I was trying to ask, but obviously did not do a good job at doing so. – user1032531 Oct 24 '13 at 14:13
  • @user1032531 look at this new fiddle I made, `window.frames["myFrame"]` and `window.frames[0]` are the same object: [http://jsfiddle.net/VPy7L/](http://jsfiddle.net/VPy7L/) – Jonathan Oct 24 '13 at 14:40
  • Yes in IE 10 and Chrome 30. No with Firefox 24. I thought your original suggestion worked, but I have been using FF so it never proved true. Maybe a bug in my FF install? Does it work for you with FF? – user1032531 Oct 24 '13 at 16:21
  • @user1032531 I tested on FF and I have your same result, checking documentation `window.frames[0]` in FF returns the `Window` object of iframe and `window.frames["myFrame"]` returns the `HTMLIFrameElement`. If you want the window object you can do this way [http://jsfiddle.net/VPy7L/1/](http://jsfiddle.net/VPy7L/1/) – Jonathan Oct 25 '13 at 08:20
  • Wow, I thought modern browsers were more consistent. I also surprised there hasn't been more documented on this subject. – user1032531 Oct 25 '13 at 13:25
0
var el = document.querySelector('#test');

var matches = el.querySelectorAll('iframe');

readmore:http://slides.html5rocks.com/#new-selectors

Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78