0

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

Vijay V
  • 389
  • 5
  • 11
  • 23

2 Answers2

0

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

var body = $('#testFrame').contents().find('body');
Gabe
  • 49,577
  • 28
  • 142
  • 181
0

Since this cross domain you have two options.

if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.

Or

you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.

Symeon Breen
  • 1,531
  • 11
  • 25