window.opener not set in iOS Chrome

Michael Lorton picture Michael Lorton · Feb 1, 2013 · Viewed 8.3k times · Source

In one file, I have

<a href="t2.html" target="_blank">go</a>

In t2.html I have

<script>
document.write(window.opener);
</script>

On Safari on iOS, and on Chrome on the Mac and on pretty much every other browser, it prints out [object Window] like you'd expect.

On Chrome on iOS, I get null.

How do I get to the window that opened this window?

Answer

Murf picture Murf · May 14, 2015

This code solves the problem you are talking about (specifically for issues with Chrome ios not liking "pop ups"), but in reference to Paypal Adaptive Payments where it opens a "pop up" and redirects to Paypal page for payment.

The key is that you have to:

  1. Initiate the window.open directly from a button/link click
  2. You must use the _blank as the window "name" (and not choose your own)

The main thing you want/need is:

var win;

//VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
    //See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
win = window.open(paypalURL,'_blank');

//Initiate returnFromPayPal function if the pop up window is closed
if (win && win.closed) {
    returnFromPayPal();
}

Here is the full code that you can follow (ignore anything that doesn't apply to what you are doing).

<div>
    <?php $payUrl = 'https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=mini&paykey=' . $payKey ?>

    <button onclick="loadPayPalPage('<?php echo $payUrl; ?>')" title="Pay online with PayPal">PayPal</button>
</div>
<script>
    function loadPayPalPage(paypalURL)
    {
        var ua = navigator.userAgent;
        var pollingInterval = 0;
        var win;
        // mobile device
        if (ua.match(/iPhone|iPod|Android|Blackberry.*WebKit/i)) {
            //VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
                //See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
            win = window.open(paypalURL,'_blank');

            pollingInterval = setInterval(function() {
                if (win && win.closed) {
                    clearInterval(pollingInterval);
                    returnFromPayPal();
                }
            } , 1000);
        }
        else
        {
            //Desktop device
            var width = 400,
                height = 550,
                left,
                top;

            if (window.outerWidth) {
                left = Math.round((window.outerWidth - width) / 2) + window.screenX;
                top = Math.round((window.outerHeight - height) / 2) + window.screenY;
            } else if (window.screen.width) {
                left = Math.round((window.screen.width - width) / 2);
                top = Math.round((window.screen.height - height) / 2);
            }

            //VERY IMPORTANT - You must use '_blank' and NOT name the window if you want it to work with chrome ios on iphone
                //See this bug report from google explaining the issue: https://code.google.com/p/chromium/issues/detail?id=136610
            win = window.open(paypalURL,'_blank','top=' + top + ', left=' + left + ', width=' + width + ', height=' + height + ', location=0, status=0, toolbar=0, menubar=0, resizable=0, scrollbars=1');

            pollingInterval = setInterval(function() {
                if (win && win.closed) {
                    clearInterval(pollingInterval);
                    returnFromPayPal();
                }
            } , 1000);
        }
    }

    var returnFromPayPal = function()
    {
       location.replace("www.yourdomain.com/paypalStatusCheck.php");
        // Here you would need to pass on the payKey to your server side handle (use session variable) to call the PaymentDetails API to make sure Payment has been successful
        // based on the payment status- redirect to your success or cancel/failed page
    }
</script>