CODEWITHSUNDEEP
javascripthtml
Pankaj jarial
Pankaj jarial

Reputation: 122

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

Upvotes: 0

Views: 191

Answers (5)

Pankaj jarial
Pankaj jarial

Reputation: 122

I did it by using following code

function loadFrame(){ document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue'; }

Upvotes: 1

Leandro Barreto
Leandro Barreto

Reputation: 361

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

Upvotes: 1

Damien Overeem
Damien Overeem

Reputation: 4529

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.

Upvotes: 0

DDK
DDK

Reputation: 1038

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.

Upvotes: 0

Patrick S
Patrick S

Reputation: 510

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')

Upvotes: 0

Related Questions