window.opener not set in iOS Chrome

Question

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 1

This seems to be a bigger story. See Bugtracker here:

http://code.google.com/p/chromium/issues/detail?id=136610&q=window.opener&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary

But it seems, as if iframes could handle the parent-property, so maybe you could switch your app from using popups to using an overlay.

Answer 2

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>

Answer 3

If you want to pass values from child to parent use the following code.

Add following code to parent page:

var hidden, state, visibilityChange;
        if (typeof document.hidden !== "undefined") {
            hidden = "hidden";
            visibilityChange = "visibilitychange";
            state = "visibilityState";
        } else if (typeof document.mozHidden !== "undefined") {
            hidden = "mozHidden";
            visibilityChange = "mozvisibilitychange";
            state = "mozVisibilityState";
        } else if (typeof document.msHidden !== "undefined") {
            hidden = "msHidden";
            visibilityChange = "msvisibilitychange";
            state = "msVisibilityState";
        } else if (typeof document.webkitHidden !== "undefined") {
            hidden = "webkitHidden";
            visibilityChange = "webkitvisibilitychange";
            state = "webkitVisibilityState";
        }

        // Add a listener that constantly changes the title
        document.addEventListener(visibilityChange, function () {

            if (localStorage.getItem("AccountName")) {
                $("#txtGrower").val(localStorage.getItem("AccountName"));
            }

            if (localStorage.getItem("AccountID")) {
                $("#hdnGrower").val(localStorage.getItem("AccountID"));
            }

           }, false);

Add following in child page (Any preferred event)

function CloseChildAndLoadValuesToParent() {

              localStorage.setItem("AccountName", 'MyAccountName');
              localStorage.setItem("AccountID", 'MyAccountID');

              window.close();


            }