Changing content of dynamically created iframe

Question

We have an application that we can't touch source code. That is why I can't inject javascript code into iframe. I tried to manipulate an image button src by jQuery and JavaScript as follow :

// there isn't id of the iframe so I used to catch by tag
$("input:image", window.parent.frames[0].document).each(function() {
    $(this).attr("src", "http://" + document.location.hostname + "/theme/img/buttonDownArrow.png")
});

// other attempt
document.getElementsByTagName('iframe').onload = function() {
    $("input:image", window.parent.frames[0].document).each(function() {
        $(this).attr("src", "http://" + document.location.hostname + "/theme/img/buttonDownArrow.png")
    });
}

but nothing happen. When I tried above code in console after iframe loaded works properly. I put source code end of the page but nothing happened too. Is there anyway to manipulate loaded iframe content?

Answer 1

This might depend on being on different domains. If the iframe is on a different domain from the page loaded in the iframe you'll probably run into security issues when trying to manipulate code "from above" exactly as it would if you tried to affect the frame "from beneath".

Answer 2

I solved this problem with the following way. Thanks Martin for the snippet

    $('[data-dojo-attach-point="iframeViewer"]').ready(function() {
      $('#form1').contents().find('input:image').each(function() {
        $(this).attr('src', 'http://' + document.location.hostname + '/theme/img/buttonDownArrow.png');
        $(this).addClass('modifyComboArrowButton');
        $(this).hover(
        function() {
            $(this).attr('src', 'http://' + document.location.hostname + '/theme/img/buttonDownArrow_hover.png')
        },
        function() {
            $(this).attr('src', 'http://' + document.location.hostname + '/theme/img/buttonDownArrow.png')
        })
      });

      $('.ComboBoxDelButton').each(function() {
        $(this).addClass('modifyComboDeleteButton');

        $(this).hover().addClass('modifyComboDeleteButton:hover');
      });
    }) 

Here is the tricky part :

$('#form1').contents().find('input:image')