Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't load Google Cloud Endpoints on Internet Explorer 10

I'm working on a web site that is using the Google JavaScript Client Library to load some APIs that are exposed via Google Cloud Endpoints. The endpoints were developed in Python, but I'm not sure if that's a factor. Everything's working great in Chrome, Firefox and Safari, but on Internet Explorer 10 I get this error:

SCRIPT5007: Unable to get property 'value' of undefined or null reference 
proxy.html, line 7 character 51

I'm loading the client library using code similar to that suggested by Google in their documentation:

<script type="text/javascript">
    Oversee.Init();
    function init() {
        console.log("starting to load endpoints");
        gapi.client.load("marketplace", "1", function() {
            console.log("finished loading endpoints");
        }, "//" + window.location.host + "/_ah/api");
    }
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>

This outputs the following on the console:

starting to load endpoints 
SCRIPT5007: Unable to get property 'value' of undefined or null reference 
proxy.html, line 7 character 51

Note that the line "finished loading endpoints" is never output.

After pretty-printing, the code in question in proxy.html appears to be this, specifically the document.getElementById('root').value, as document.getElementById('root') is null or undefined.

gapi.load('googleapis.proxy', {
    callback: function () {
        return window['googleapis']['server']['initWithPath']
            .call(this, document.getElementById('root').value);
    },
    config: {
        // snipped
    }
});

I've noticed that if I reload the page, the api loads successfully, with the following output in the console:

starting to load endpoints 
finished loading endpoints 

All of the above is happening both when I'm using the local development server and when I'm using the app hosted on production Google App Engine instances.

Has anyone managed to successfully call Google Cloud Endpoints from Internet Explorer 10? If so, what am I missing in my code?

EDIT: The problem is also happening with Google's example Cloud Endpoints web app. I deployed a copy of it here: https://cloud-endpoints-demo.appspot.com, and the same error occurs when running it on Internet Explorer 10.

EDIT 2: I created an issue here: https://code.google.com/p/googleappengine/issues/detail?id=10700

EDIT 3: The problem also occurs in Google's TicTacToe example for cloud endpoints. I deployed a copy of it here: https://cloud-endpoints-tictactoe.appspot.com; just as with the other demo, it works great on Chrome and Safari, but fails in the same way with Internet Explorer 10.

EDIT 4: I took a closer look at the proxy.html that Google serves up. Below the script tag that causes the error, there is this body, which does include a textarea with id 'root':

<body>
    <textarea id="root" style="display:none">/_ah/api</textarea>
    <div id="lcsclient" style="position:absolute;left:-10000px;"></div>
</body>

So, it looks like Google needs to make some changes to proxy.html to ensure that the document has loaded before the javascript executes on Internet Explorer - am I right?

like image 782
Greg Avatar asked Mar 14 '14 00:03

Greg


1 Answers

I have had similar issues with loading Google APIs for the Google Earth plugin in IE 10 and 11. The only resolution we have found (Other than Google fixing this) is to force IE 10 to run in IE 9 mode. Every version of IE includes the rendering engines from the previous major versions. You can test this manualy by going into the developer tools in IE and set which IE rendering engine you want to use.

You can force IE to render in a specific mode by adding this meta tag in your html file:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

It HAS to be the first meta tag in the HTML file, or it will be ignored by IE. This meta tag will be ignored by other browsers. This will however make your entire page render with the IE 9 engine so you do lose cpabilities present in IE 10 and 11. If you need IE 10 functionality this solution will not work for you. If IE 9 compatibility is part of your requirements, this may be a work around for this problem

This link has more info on the IE compatibility modes

like image 167
Eric Avatar answered Nov 19 '22 02:11

Eric