Question

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

Answer 1

Assuming this is not a cross-domain issue, try:

var body = $('#testFrame').contents().find('body');