get the element inside of iframe

Question

I want to get body element 'tinymce' which positioned inside iframes as the tree shown below..

html -> body -> div#wpwrap -> div#wpcontent -> div#wp-content -> div#wrap -> form#post -> div#editorcondainer -> div#poststuff -> div#post-body -> div#post-body-content -> div#postdivrich -> div#editiorcontainer -> span#content_parent -> table#content_tbl.mceLayout -> tbody -> tr -> td.mceIframeContainer.mceFirst.mceLast -> iframe#content_ifr -> html -> body#tinymce.mceContentBody

For that i uses the code :

 var iframeEl = document.getElementById('content_ifr');
 alert(iframeEl);

 if ( iframeEl.contentDocument ) { // DOM

  var bdy = iframeEl.contentDocument.getElementById('tinymce');

 } else if ( iframeEl.contentWindow ) { // IE win

  var bdy = iframeEl.contentWindow.document.getElementById('tinymce');

 }

But iframeE1 is null :(

Im trying other ids in the tree but it stop returning elements from the 'span id :content_parent', the last id returning object is 'div id :editorcontainer'

How could i get the elements after 'span id :content_parent'

score 2 · Answer 1 · answered Jan 07 '11 at 17:27

2

Try document.getElementById('content_ifr'); The code above looks for document.getElementById(undef); (since you never define a variable called content_ifr).

answered Jan 07 '11 at 17:27

Aaron Digulla

321,842
108
597
820

I tried in that way too.. But still its returning null. So iframeEl is null & execution of further makes errors.... :( – DarRay Jan 12 '11 at 09:27
If it returns null, then there is no element with that ID in the current document. Also check the JavaScript error console; maybe there is another bug. – Aaron Digulla Jan 12 '11 at 10:57
Im trying other ids in the tree but it stop returning elements from the 'span id :content_parent', the last id returning object is 'div id :editorcontainer' How could i get the elements after 'span id :content_parent' – DarRay Jan 12 '11 at 15:25
Just like you would with every other element in the same document; the bug must be elsewhere. – Aaron Digulla Jan 12 '11 at 21:51

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

The <iframe> creates a new window context with a new document. So give the <iframe> a name attribute like name="somename" so you can access it like this:

window.somename.document.getElementById('tinymce')

If you don't have access to the HTML you could first add the name via JS like this:

document.getElementById('tinymce').setAttribute('name','somename');

Some digging on SO brought up this: accessing a form that is in an iframe which explains how to do this with only an ID. That should sum up the possibilities.

edited May 23 '17 at 11:55

Community

1
1

answered Jan 07 '11 at 17:57

DanMan

11,323
4
40
61

Is there way to add name to the iframe or can u please explain a way to use above syntax using its id... – DarRay Jan 12 '11 at 09:21
Use ` – Aaron Digulla Jan 12 '11 at 10:59
i cannot edit the content in iframe tag, coz im not the person who create it. Thats why im trying to access via its id. Is there a way to add a name to that iframe outside of its iframe tags of is there a way to access the iframe by its id.. – DarRay Jan 12 '11 at 15:27

score 0 · Answer 3 · answered Jan 12 '11 at 15:53

0

If the source of the iframe is not in the same domain as the the containing page, you will not have access to the iframe's contents, as they're in differing security sandboxes.

answered Jan 12 '11 at 15:53

zzzzBov

174,988
54
320
367

does it means i have not any options left to access that element 'tinymce' – DarRay Jan 12 '11 at 16:08
Only if you're trying to perform cross-domain access. Imagine if you could embed an iframe with a bank's login page. You could write some script to grab the autofill data from any users who happen to use that bank. – zzzzBov Jan 12 '11 at 16:24

get the element inside of iframe

3 Answers3