-2

I tried using document.getElementById("frame-id"), but it seems buggy. Mostly it returns undefined or null but sometimes it returns the iframe only for the first time it is called then again it starts returning undefined. Also I am unable to change or get style properties with document.getElementById("frame-id").style.width. E.g. here is the fiddle https://jsfiddle.net/Lfq2u2o1/1/ You can check with the console.

Why are iframe elements not accesible with document.getElementByid or document.getElementsByClassName in javascript?

user31782
  • 7,087
  • 14
  • 68
  • 143
  • Possible duplicate of [How can I access iframe elements with Javascript?](http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript) – Mohammad Usman May 13 '16 at 11:56
  • In the code you posted there isn't inside the iframe tag the id="frame-id" – Pierfrancesco May 13 '16 at 11:58
  • Are you sure that the javascript code is executed after the iframe html tag is declared in the DOM? – Pierfrancesco May 13 '16 at 12:04
  • @Pierfrancesco I am using javascript only in the console window after some time the page loads completely. – user31782 May 13 '16 at 12:07
  • "You can check with the console" — Not when it is JS Fiddle, since the frame containing your document isn't the top level frame so `document` will be the wrong document. – Quentin May 13 '16 at 12:07
  • @Quentin It also doesn't work in the html file opened directly in web browser. – user31782 May 13 '16 at 12:10
  • @user31782 — It does here: https://www.evernote.com/l/AAPNApWNCodE37RNcb1YHo2WcFBb5g2TvtU – Quentin May 13 '16 at 12:13

1 Answers1

0

They are. You can't do anything inside the iframe with javascript (with the exception of window.postMessage()) but element selection works like any other selector in javascript.

Adding

console.log(document.getElementById("frame-id"));

to your fiddle should work perfectly.

Michael Ambrose
  • 992
  • 6
  • 11
  • `console.log(document.getElementById("frame-id"));` returns undefined. – user31782 May 13 '16 at 12:06
  • Are you running this on your site or in the snippet? – Michael Ambrose May 13 '16 at 12:06
  • I tried both. I used everything inside the html file and console window both. – user31782 May 13 '16 at 12:07
  • Nothing happens on this jsfiddle too. – user31782 May 13 '16 at 12:09
  • Note that you can't run javascript in the console on a jsfiddle. The jsfiddle content gets put into an iframe and you'll run into security constrictions. – Michael Ambrose May 13 '16 at 12:12
  • Here, since alerts are easier to verify than something in the console, what do you see on this one? https://jsfiddle.net/Lfq2u2o1/3/ – Michael Ambrose May 13 '16 at 12:12
  • Yes it is working now. But then why does document.getElementById("frame-id") return _undefined_ or _null_ after second call? – user31782 May 13 '16 at 12:15
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111858/discussion-between-michael-ambrose-and-user31782). – Michael Ambrose May 13 '16 at 12:16
  • Can I change height of iframe with `document.getElementsByClassName("main-video")[0].getAttribute("height")`? – user31782 May 13 '16 at 12:41
  • Yes, use something like this: `console.log(document.getElementsByClassName('main-video')[0].style.width = '200px')` – Michael Ambrose May 13 '16 at 12:45
  • Actually I want to do the following, but it is not working: `var framewidth = document.getElementsByClassName("main-video")[0].getAttribute("width"); document.getElementsByClassName("main-video")[0].getAttribute("height") = 9/16 * framewidth;` – user31782 May 13 '16 at 12:46
  • To get existing styles that aren't explicitly set on an element (such as in a class, etc) use `window.getComputedStyle(document.getElementsByClassName('main-video')[0]).height` – Michael Ambrose May 13 '16 at 12:50
  • I've explicitly set them on them live site. `document.getElementsByClassName('main-video')[0].style.width = '200px'` doesn't work. Although `document.getElementsByClassName("main-video")[0].getAttribute("height")` works but it is not changable. – user31782 May 13 '16 at 12:54
  • getAttribute is only for *getting* attributes, not setting. Try this: `var framewidth = parseInt(window.getComputedStyle(document.getElementsByClassName('main-video')[0]).width); document.getElementsByClassName("main-video")[0].style.height = (9/16 * framewidth) + 'px';` It requires no css styling whatsoever. – Michael Ambrose May 13 '16 at 12:56