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.
Related
<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.
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.
I am using the following HTML to embed HTML from an external URL into my site and it works great:
<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
<embed src="https://myapp.com/explore" width="100%" height="100%;" />
Error: Embedded data could not be displayed.
</object>
On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.
However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.
Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...
I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:
<iframe id="exploreIFrame" src="http://myapp.com/explore"
width="100%" height="100%" style="border: none;"
></iframe>
To make it span the entire window, set these styles:
<style type="text/css">
body { margin: 0; }
#exploreIFrame { position: fixed; }
</style>
It would be better to use an iframe instead of an embed.
iframe:
The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.
embed:
Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.
The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document, you can reach the parent with:
parent = window.parent.document;
For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).
Try using the max-height property in pixels, and use the overflow property to scroll...
object_classname{
max-height: 600px; //as you like
overflow-y: scroll;
}
Couldbe hardware related. If you have a button/wheel on the mouse that you are clicking when you select the scrollbar. IT sounds like a problemI experienced with amouse that had an extra button on a scroll wheel.
I am using an <iframe> in my HTML document.
When I view the source code in the browser via the View Source option I cannot see the elements inside the <iframe>. However when I inspect the source code in Firebug I can see all the elements in iframe.
Is there are way to echo the entire HTML structure like Firebug shows it to the console via JavaScript, e.g. using jQuery?
Right click into the <iframe> and choose This Frame > View Frame Source. (At least that's how you can do it in Firefox.)
You can use console.dirxml(window.frames[i].document) with i being the index of your <iframe>.
Sebastian
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.