How can i access to iframe inside iframe? - javascript

<iframe src="...">
<iframe id="embedIframe" src="...">
</iframe>
</iframe>
I want to select an Iframe element with an Id of "embedIframe".
I tried document.getElementById("embedIframe") in the console window in developer tools.
But this returns a null value.
The strange thing is that if I directly click "embedIframe" in the Chrome Developer Tools element tab with the mouse, then return to the console window and type document.getElementById("embedIframe"), a normal value is output.
https://i.imgur.com/natyF1I.png
I'm using react.
React doesn't find document.getElementById("embedIframe") either.
How can i access to Iframe id "embedIframe" at once?

If you have a document containing an iframe, and in the same document you have another iframe as a child element of the first … then your HTML is invalid and you can't do that.
Children of iframes used to be alternative content to render if the browser didn't support iframes, but that has been phased out and iframes are no longer allowed children.
If you have an iframe with a src of ... and then the document (from ...) the is loaded into that iframe contains another iframe then document.getElementById("embedIframe") doesn't work because embedIframe isn't part of that document.
You need to get the iframe in the current document, then get the document belonging to that frame, and then search that document for the iframe you want.

Related

How to make an iFrame go fullscreen with JS from its inside?

I have an iFrame content that I use on third party websites.
I'm trying to get this iFrame content to go in full-screen browser mode.
This works OK when using the content alone as main document, but not on these third party websites (lms), that have often several iFrames nested, and my content is always the final nested one of course.
What I don't understand is that document.body.webkitRequestFullScreen() is well defined in my document but it returns undefined.
I'm making an hypothesis: Do all nested iFrames need to have the allowFullScreen attribute? Or Can the full-screen work if only the upper iFrame have it?
And if my problem comes from this attribute, is there a way to allowFullScreen to all parents iFrames of the document?

Javascript changing contents of an iFrame, from the inside of the iframe

How to change the innerHTML of an iframe, from the inside of that iframe?
<iframe>
foo
<script>
.... will change "foo" to "bar" .....
</script>
</iframe>
That's not how iframes work.
The innerHTML of the iframe tag is fallback content, to be displayed only when the browser does not support iframes. All current browsers (including screenreaders) do support them; unless your site needs to support truly ancient browsers (we're talking stuff from the mid-1990s, IE5 and below) this can generally be omitted, because it won't be shown to anyone.
Instead, use the src attribute on the iframe tag to point to a separate web page, which will act separately from the parent window.
<iframe src="this_page_will_be_shown_in_the_frame.html">
This is fallback content that will not be shown in any current browsers
</iframe>
That framed page can have its own javascript and CSS which can modify its contents independently of the parent window -- so you'd modify the framed page from within the frame exactly the same way you'd modify it if it weren't inside a frame at all.
If the parent and the framed documents are on the same domain name, you can make the javascript from one affect the other -- by using window.parent from the frame or .contentWindow on the iframe node from the parent -- but by default both the CSS and javascript for each document will work separately and not affect each other.

iframe src is not changing when I click back button

<iframe id ="iframeA" name="iframeA" src="./friendList.html" frameborder="0" width="100%" height="100%"></iframe>
I have an iframe tag like this.. and When the parent frame is loaded I add some tags in this iframe body. However when I change iframe src to './letterList.html' using jquery then letterList.html will be loaded correctly and then when I click back button, iframe src is not change to original './friendList.html'(even the focus was in the iframe) , But the content in iframe was './friendList.html' 's content. only src was not changed. and of course the tags that I added in iframe body was gone. I understand that tags were gone, but I can't understand why src is not changed but the contents in iframe is the original iframes'content.
Anybody can help me?.....
Not sure how you mean 'why'. This is not error, this is specified behaviour (look at the note right before name attribute description). This was probably done because iframes sometimes should be unable to interact with parent document at all.
However, if you want to handle that, you might for example catch onbeforeunload event in iframe and reset its src.

Can't grab a frame within an iframe and a frameset with javascript (domains are the same)

I'm tying to grab with javascript a HTML element located in a frame nested in an iframe and a frameset. The HTML structure looks like this:
<iframe id="central_iframe" name="central_iframe" (...)>
<frameset cols="185, *" border="0" framespacing="0" frameborder="0">
<frame src="/subdomain" name="SideFrame" id="SideFrame" (...)>
Previously I've done it like this:
myIframe = document.getElementById('central_iframe');
mySideFrame = myIframe.contentDocument.getElementById('SideFrame');
myElement = mySideFrame.contentDocument.getElementById('iWantToGrabThis');
This however does not work here because myIframe.contentDocument returns null. myIframe.contentWindow on the other hand returns a window that has no properties at all (and hence myIframe.contentWindow.document is undefined). Similarly, when I try
central_iframe.SideFrame
also a window with no properties whatsoever is returned.
EDIT: The page is not mine and therefore I can't change its source. I'm just trying to interact with it.
I'm doing the testing in Chrome developer tools. I've also tried it with the same result in GeckoFX. Any help will be appreciated.
an iframe points to an other source with the src attribute! you cant embed any html within an iframe. Put the frameset into a html file where you point to by the iframe src. You'll then be able to select the iframe from a script with window.parent. You can access the frames of the frameset with document.frames.
After doing more research it indeed seems that Justin Morgan's suggestion is right and what I want is impossible. I made a partial workaround by loading the parent iframe in the browser to begin with. This allowed me to access the child frame (SideFrame) normally.

HTML generated for RichTextArea: what is #document?

I can see in Chrome Develoer Tools that html generated for GWT's RichTextArea widget is something like this:
<iframe class="GCJ2VDKDEI" style="height: 40px; ">
#document
<html>
<head></head>
<body>entered text</body>
</html>
</iframe>
Could somebody desribe how it works? How is it possible that page embedded in <iframe> is editable for user (looks and behaves like text area)?
I would especially like to know what is that strange #document thing. It's first time I see something like this and Google gives me no answers :(.
It's the Document node of the document inside the iframe. All Document nodes have a nodeName property of "#document", which you can see by examining document.nodeName. Chrome's developer tools are probably handling the iframe by adding an expansion of the iframe's contentDocument property as a child of the iframe expansion.
As to the document being editable, it's very common for WYSIWYG editors to use an iframe for the editable content. All current browsers allow built-in editing functionality on any element via the contenteditable attribute, and also at a document level via the document.designMode property.

Categories

Resources