I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project