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.
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.
I am attempting to build a testing page for use in Internet explorer by creating an iframe and dynamically building the iframe contents using javascript or vbscript. I would normally use a data: URI, but IE blocks this.
example.
<iframe sandbox="allow-scripts" src="javascript:document.write('test')"></iframe>
it appears that IE is the only browser that will not allow me to build the iframe contents through a javascript:function() src, even though the allow-scripts sandbox attribute is set. I am not trying to pass any information between the iframe and parent window and do not want to have the allow-same-origin set since it would pretty much defeat the purpose of having a sandboxed iframe.
Are there any other methods to dynamically build the iframe contents other than a javascript or data: URI in the src, or through javascript in the parent window since it will not work with the sandboxed iframe due to same origin restrictions? I also do not want to have to set the content from an external page.
javascript: is a kind of weird URI protocol. It works in some contexts, like <a href>, but not all - for instance, a window's location can not be set to such a URI. (While you can assign a javascript: URI to window.location as a really roundabout way of running a script, the window's location doesn't stay set to that value.)
To write content into an IFRAME, get a reference to the frame's document and write to it. Doing so will require that you set the allow-same-origin sandbox flag.
<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe>
var frame = document.getElementById("myframe");
var fdoc = frame.contentDocument;
fdoc.write("Hello world"); // or whatever
Live example: http://jsfiddle.net/wUvrF/1/
HTML5 defines the "srcdoc" attribute for this purpose
<iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&page=1">in my gallery</a>."></iframe>
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.
I am loading a HTML page inside an tag, Since iPAD not supporting iFrame i am using the tag to load External html pages inside a container. Everything works fine, Now i want to call a function from a Loaded Page (Page which loaded inside ). Can any one help me to find out the solution ?
"<object id='page' width='100%' height='100%' data='"+pageURL+"' style='position:absolute;'></object>";
Finally i GOT the Solution for accessing the Javascript function of HTML page loaded inside Object Tag.
window.objectID.functionName();
This will call the function ("But it is not working in IE8"). Use iframe for IE.
If you mean you want your code to call a JavaScript function in the context of the loaded page, you can't if the pages aren't from the same origin (which from the sound of it, they aren't). It's prohibited by the Same Origin Policy. The JavaScript code in your page can't interact with the other page.
If the pages are from the same origin, the object element's contentWindow and contentDocument properties are supposed to provide access to it, although I haven't used them on object elements and don't know how well-supported they are.
I have a page which contains an iFrame into which I display the content of another page, which contains an iFrame; I don't control this page. I would like to get the src attr of the embedded iFrame and display that content within my iFrame. Is this possible with either jquery or javascript?
Just to be clear, here is what I have:
iframe src="somepage.html" id="mypage"
somepage.html looks like this:
iframe src="content.html"
I want to extract content.html from somepage.html and display it within "mypage" before displaying the frame. Is this possible?
If you do not control the other page, and it is not on the same domain as you, browser security restrictions will not let you read the contents of the first iframe on the client (see eg. https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript ). This will make it impossible to read the contents of the second iframe. The only exception is that you may be able to talk from the innermost iframe to the topmost iframe by using window.top, assuming that innermost iframe is on the same domain as the topmost one -- essentially bypassing the 'middle' iframe.
Other than that, you could work around it by requesting the 'middle' frame's html contents using a proxy on the server written in a server-side language of your choice (PHP, Java, Python, Ruby, what-have-you), parsing it for the iframe and then feeding this back to your own application. Depending on what exactly you're doing, this may or may not be a viable option...