0

I'm working on a phaser game that's to be embedded in a website via iframe. The game supports multiple languages, so we've taken to using the site the game was accessed from as an indicator (phaser-game.com/ru would be in Russian, phaser-game.com/ar would be in Arabic, etc).

Here's the code so far (fired via window.addEventListener('load', getDomainSetLanguage);:

function getDomainSetLanguage()
{
    let url = (window.location !== window.parent.location) ? document.referrer : document.location.href;
    console.log('url = ' + url);

    for (let i = 0; i < COUNTRIES_DOMAIN.length; i++)
    {
        if (url.indexOf(COUNTRIES_DOMAIN[i].URL) >= 0)
        {
            DOMAIN_ID = COUNTRIES_DOMAIN[i].ID;
            LANGUAGE_ID = COUNTRIES_DOMAIN[i].LANGUAGE_ID;
            break;
        }
    }

    if (DOMAIN_ID === -1)
    {
        DOMAIN_ID = 1;
    }

    if (LANGUAGE_ID === -1)
    {
        LANGUAGE_ID = 1;
    }

    console.log('DOMAIN_ID = ' + DOMAIN_ID + "; LANGUAGE_ID = " + LANGUAGE_ID);
}

Now this works fine, on the surface. However, the game does trigger a reload every now and then, and when the game comes back, it now gets it's own URL, not the parent's / iframe's.

This has the result of the game language defaulting to English.

Note that this only occurs in Chrome and Safari. FireFox works just fine.

Is there something I'm missing? Or is there anything else I can try?

I've tried logging the values of document.referrer and document.location.href, but I'm just getting browser errors about permissions and stuff and the game defaults to English.

I read from here that Chrome (and possibly Safari) doesn't fire the onload function of objects in the iframe, but I'm not sure if this applies to me, as I have a lot of other functions tied to onload that do work.

It should be mentioned that I cannot modify the iframe itself, so any solution must be from the game itself.

Thanks!

zack_falcon
  • 4,186
  • 20
  • 62
  • 108

1 Answers1

1
let url = (window.location !== window.parent.location) ? document.referrer : document.location.href;

This line from your code makes it so that when you're inside of an iframe, document.referrer is used as the URL to determine the language from.

As per the MDN page on Document.referrer:

The Document.referrer property returns the URI of the page that linked to this page.

Inside an <iframe>, the Document.referrer will initially be set to the same value as the href of the parent window's Window.location.

This means it will work on initial load just fine, as you've experienced. As far as I can tell, the specification isn't explicit about how to handle reloading. This is probably the cause of the differences in browser behaviour. It isn't too crazy to think that is should be empty after a reload, as it wasn't loaded from the parent page that time around.

An alternate solution would be to use window.parent.location.href, which always refers to the URL of the iframe's parent window (read more in Difference between document.referrer and window.parent.location.href).

Your line of code could look something like this:

// if parent and child href are equal, using either yields the same result
// if there is no parent, window.parent will be equal to window
// therefore, the conditional statement isn't necessary 
let url = window.parent.location.href;
Timo
  • 233
  • 1
  • 11
  • Interesting. I'm getting a `SecurityError: Permission denied to get property \"href\" on cross-origin object` (Firefox), and something similar in Chrome. I assume this is some security feature preventing the page in an iframe from accessing the iframe URL? – zack_falcon Sep 13 '19 at 08:11
  • Ah, ok. That suggests to me that the iframe is on a different domain from the parent page. Is that correct? Could you also add the answer to the question please? Can you also tell us how much control you have over the parent page and how much control you have over the page inside the iframe? – Timo Sep 23 '19 at 19:56