jQuery: How to manipulate the contents of an iframe when the src is a different domain?

Question

I have an iframe loading a page, and I would like to manipulate the contents.

For example:

<iframe id="myIframe" src="http://www.google.com"></iframe>

<script>
    $(document).ready(function(){
        $(iframeContents).css('background-color', '#000');
    });
</script>

How can I do this?

possible duplicate of [jquery/javascript: accessing contents of an iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) — Pekka, Oct 27 '10 at 21:50

score 6 · Accepted Answer · answered Oct 27 '10 at 21:49

6

You can't. The Same Origin Policy forbids this.

answered Oct 27 '10 at 21:49

Pekka

442,112
142
972
1,088

score 1 · Answer 2 · answered Oct 27 '10 at 22:17

As Pekka said, you can't, not directly. The JavaScript security model prohibits this. However, you can do it if the domain in the iFrame is the same as the one in which the script runs. So what can be done is to set up a proxy on your own domain, and show the content in the iFrame through the proxy and then use JS to interact with it.

jQuery: How to manipulate the contents of an iframe when the src is a different domain?

2 Answers2