8

I want to have a way somehow to get the iframe content when some action is triggered in the iframe window. All the content in the iframe comes from other website. There's a textbox and a button in the iframe and I want to detect when the content will be updated and if there's specific content in the iframe then I need to perform some actions. Currently what I have is this:

<script type="text/javascript">
    $(document).ready(function() {
        var timesRefreshed = 0;
        $('#frame').load(function () {
            if (timesRefreshed == 1) {
                var data = {
                    transactionID : '@Model.OrderId'
                };
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("ConfirmationStep", "Cart")',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(data),
                    dataType: "json",
                    success: function(result) {                       
                    }
            });
            }
            timesRefreshed++;
            if (timesRefreshed == 2) {
                window.location.href = '/Home/PaymentComplete/';
            }           
        });
    });  
</script>

Using this approach doesn't give me a lot of options but simply checks how many times the iframe has been loaded, but for example if the user enters incorrect data the iframe might be loaded but with message saying that the value is not correct.

Now, this piece of code will see that the timesRefreshed equals 2 and it will redirect to the other view. I want to check the actual content of the iframe. I checked the innerHTML property but its empty most probably because the iframe is hosting content from other website.

Qantas 94 Heavy
  • 15,750
  • 31
  • 68
  • 83
Laziale
  • 7,965
  • 46
  • 146
  • 262
  • Not tried `MVC` . Does `$.ajax()` call load `iframe` ? How is `iframe` loaded ? Thanks for sharing – guest271314 Mar 28 '14 at 22:01
  • 1
    Is the other website on the same domain (another page) or are you trying cross domain, form another provider? Usually iframes should be the last resort of anything you do with webpages nowadays. (BUt I understand that some companies just don't/won't or cant afford to pay for more development) – Piotr Kula Mar 31 '14 at 11:54
  • 2
    Imagine a malicious user creating a website that puts your bank website in a full-screen `iframe` and successfully gets you to visit it through XSS. If we were able to capture javascript events in that `iframe`, that malicious user would be able to capture your keystrokes and determine your username and password. There are security implications to what you are trying to do. – Mister Epic Mar 31 '14 at 12:03
  • @ppumkin I'm trying cross domain. Chris I'm aware of that, thx – Laziale Mar 31 '14 at 12:08
  • Cross domain then the 3rd party has to allow cross site origins, for your domain, your IP or just public. Trust me, thats the easiest way or use webservices instead . – Piotr Kula Mar 31 '14 at 12:10
  • 2
    @Laziale Because of those security implications, browsers will not bubble events from an `iframe` from a cross-domain website: http://stackoverflow.com/questions/13780667/catch-all-events-in-iframe-jquery-and-replicate You really should be looking at services instead. – Mister Epic Mar 31 '14 at 12:11

1 Answers1

5

Try jQuery postMessage. Demo

jQuery postMessage enables simple and easy window.postMessage communication in browsers that support it (FF3, Safari 4, IE8), while falling back to a document.location.hash communication method for all other browsers (IE6, IE7, Opera).

With the addition of the window.postMessage method, JavaScript finally has a fantastic means for cross-domain frame communication. Unfortunately, this method isn’t supported in all browsers.

Yasser Shaikh
  • 46,934
  • 46
  • 204
  • 281