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>
Related
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 want to achieve the fallowing goal.I want by the click of a button to get the domain name entered in one input and load it into an iframe. What i have trouble with is after i load the specific site in the iframe how can i get the DOM of the loaded site in the iframe ? I need to save the exact path of an element of my choosing from the newly loaded site in the iframe by clicking on it. Any help would be much appreciated. Thank you.
You can access the <iframe>'s contents via the contentDocument property.
var iFrameContent = $('myIFrame')[0].contentDocument;
$(iFrameContent).find('.mySelector').text();
I should also point out accessing the <iframe>'s contents can only be done if the src of the <iframe> is from the same domain as your script. If the src of the <iframe> is from any other domain, the browser will deny access to the <iframe>contents.
This is a CORS consideration.
UPDATE:
To get around the CORS limitation, you'll have to write a server-side proxy for the URL that is the src of the <iframe> (and it could be pretty simple).
If I were to do something like this in ASP.Net (as an example), I would write a web service that:
takes the actual URL as a String parameter.
Uses the HTTPWebRequest object (or similar) to get the URL contents.
Return it back to the browser.
Then you could set your <iframe> src to "http://mysite.com/getURLService?url=www.lalala.com" and get the contents because the contents are now delivered by "http://mysite.com".
You use .contents()
like $("iframe").contents().find(); etc
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 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...
I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)
This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.