jQuery: change the image of an iFrame

Question

I have an iframe from anoter page in another domain.:

For example:

<iframe id="myframe" src="http://stackoverflow.com/">
</iframe>

and in jQuery, i have this:

$(document).ready(function(){
    $("#myframe").load(function(){
        var obj = $("#myframe").contents().find('#hlogo');

        div.append('<img src="http://www.my-domain.com/img/myimage.jpg" />');
    });

});

But it is not adding an image. What can I do?

In this fiddle, I am trying to change the image to something else -Same problem, different sources.

I think it has something to do with [SOP](http://en.wikipedia.org/wiki/Same_origin_policy#Origin_determination_rules). — Dave Chen, Jul 29 '14 at 22:41
try with this first: frames['nameOfMyIframe'] If this is undefined than it should be SOP as Dave Chen suggested! — czupe, Jul 29 '14 at 22:45
It is impossible to do. You can not touch the content of another domain. — epascarello, Jul 29 '14 at 22:51

Thom-x · Answer 1 · 2014-07-29T22:57:06.480

If you want to change the src attribute of #hlogo you need to do like so :

var iframe = $('<iframe>', {
       id:  'pay-rent',
       }).appendTo('body');


       iframe.load(function(){
        var obj = $('#pageHeaderLogo',iframe.contents());
        console.log(obj);
        obj.attr('src', 'http://www.firstchoicehousing.com/images/logo.png');
    });

iframe.attr({
 src:"http://wemanageproperties.securecafe.com/residentservices/apartmentsforrent/userlogin.asp"
 });

http://jsfiddle.net/UYPTc/
If the iframe is different domain, you cannot access the contents of it due to Same-origin policy

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://fiddle.jshell.net" from accessing a frame with origin "http://wemanageproperties.reslisting.com". Protocols, domains, and ports must match.

score -1 · Answer 2 · edited May 23 '17 at 10:33

-1

you can use jQuery.contents() function

docs: http://api.jquery.com/contents/

see also How to access the content of an iframe with jQuery?

edited May 23 '17 at 10:33

Community

1
1

answered Jul 29 '14 at 22:45

Roman M

450
1
5
12

jQuery: change the image of an iFrame

2 Answers2