Develop Reference

Bypass Cross-Domain-Policy to access iframe's HTML with server-side solution

Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.

It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.

Get content of an iframe after it loads with

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

Fetching inner element of Iframe

I have a simple html page. It has a iframe to some other site. I want to change the color of anchor tag that is nesteed in that Iframe. is is possible to access Elements of Iframe via javascript

If the other page is in another domain, due to cross-domain security, it will not be possible to edit HTML content of an iframe from the main page.
There are workaround for this, such as writing the change you want to make in the url. But this is really dirty.
If it is in the same domain, i suggest using, as example:
$('div', $('iframe')[0].contentWindow.document)
for getting all div elements inside your iframe

I did it by using following code
function loadFrame(){
document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue';
}

You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')

You can get the values of the elemets inside the iframe using
$('#iframeId').contents().find('#id-of-element-inside-iframe');
But the values cannot be altered.

There is just one simple solution, which will only work when you own the content in the iframe.
In your parent source add:
<script type="text/javascript">
var innerDocument = null;
</script>
In your iframe add:
<script type="text/javascript">
parent.innerDocument = document;
</script>
When the iframe is loaded you can now target the iframe's document by using innerDocument.
This circumvents the cross-domain security.

Retrieve the src of an iframe embedded within another iframe

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...

Gathering location of an IFRAME

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.