更改动态创建的iframe的内容(Changing content of dynamically created iframe)

更改动态创建的iframe的内容(Changing content of dynamically created iframe)

我们有一个我们无法触及源代码的应用程序。 这就是为什么我不能将javascript代码注入iframe。 我尝试通过jQuery和JavaScript操作图像按钮src，如下所示：

// 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") }); }

但什么都没发生。 当iframe加载正常后，我在控制台中尝试上面的代码。 我把源代码放在页面的末尾，但也没有发生任何事情。 反正有没有操纵加载的iframe内容？

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?

最满意答案

这可能取决于在不同的域上。 如果iframe与iframe中加载的页面位于不同的域中，则在尝试“从上方”操作代码时可能会遇到安全问题，就像您尝试“从下方”影响框架一样。

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