无法在 Internet Explorer 10 上加载 Google Cloud Endpoints答案

【问题标题】：Can't load Google Cloud Endpoints on Internet Explorer 10无法在 Internet Explorer 10 上加载 Google Cloud Endpoints
【发布时间】：2014-04-19 01:54:47
【问题描述】：

我正在使用Google JavaScript Client Library 加载一些通过Google Cloud Endpoints 公开的API 的网站。端点是用 Python 开发的，但我不确定这是否是一个因素。在 Chrome、Firefox 和 Safari 中一切正常，但在 Internet Explorer 10 上出现此错误：

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

我正在使用类似于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>

这会在控制台上输出以下内容：

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

请注意，“完成加载端点”这一行永远不会输出。

经过漂亮的打印后，proxy.html 中的代码看起来是这样的，特别是 document.getElementById('root').value，因为 document.getElementById('root') 为 null 或未定义。

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

我注意到，如果我重新加载页面，api 加载成功，控制台输出如下：

starting to load endpoints 
finished loading endpoints

当我使用本地开发服务器和使用托管在生产 Google App Engine 实例上的应用时，上述所有情况都会发生。

有没有人成功地从 Internet Explorer 10 调用 Google Cloud Endpoints？如果是这样，我的代码中缺少什么？

编辑：Google's example Cloud Endpoints web app 也出现了问题。我在这里部署了它的一个副本：https://cloud-endpoints-demo.appspot.com，在 Internet Explorer 10 上运行它时也会出现同样的错误。

编辑 2： 我在这里创建了一个问题：https://code.google.com/p/googleappengine/issues/detail?id=10700

编辑 3：Google's TicTacToe example for cloud endpoints 中也出现此问题。我在这里部署了一个副本：https://cloud-endpoints-tictactoe.appspot.com;与其他演示一样，它在 Chrome 和 Safari 上运行良好，但在 Internet Explorer 10 上以同样的方式失败。

编辑 4： 我仔细查看了 Google 提供的 proxy.html。在导致错误的脚本标记下方，有这个正文，其中包含一个 id 为“root”的文本区域：

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

因此，Google 似乎需要对 proxy.html 进行一些更改，以确保该文档在 javascript 在 Internet Explorer 上执行之前已加载 - 我说的对吗？

【问题讨论】：

错误：code.google.com/p/googleappengine/issues/detail?id=10700 被标记为已修复。

标签： javascript internet-explorer google-app-engine internet-explorer-10 google-cloud-endpoints

【解决方案1】：

我在为 IE 10 和 11 中的 Google Earth 插件加载 Google API 时遇到了类似的问题。我们发现的唯一解决方案（Google 修复此问题除外）是强制 IE 10 在 IE 9 模式下运行。每个版本的 IE 都包含以前主要版本的渲染引擎。您可以通过进入 IE 中的开发人员工具并设置您要使用的 IE 渲染引擎来手动测试。

您可以通过在您的 html 文件中添加此元标记来强制 IE 以特定模式呈现：

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

它必须是 HTML 文件中的第一个元标记，否则会被 IE 忽略。此元标记将被其他浏览器忽略。但是，这将使您的整个页面使用 IE 9 引擎呈现，因此您确实会丢失 IE 10 和 11 中存在的功能。如果您需要 IE 10 功能，此解决方案将不适合您。如果 IE 9 兼容性是您要求的一部分，这可能是解决此问题的方法

This link has more info on the IE compatibility modes

【讨论】：

【解决方案2】：

希望对你有帮助：

var executeRequest = function(path, data, callback, method){
    var url = ‘YOUR_API_LINK' + path;
    $.ajax({
        url: url,
        type: method,
        dataType: 'json',
        data: data?data:null,
        success: function(data, status, xhr) {
        },
        error: function(xhr, status, error) {
        },
        complete: function(xhr, status) {
            var data = null;
            console.log('Request ' + url + ' completed');
            if (xhr.responseText && xhr.responseText.length > 0) {
                data = $.parseJSON(xhr.responseText);
            }
            if (callback)
                callback(data);
        }
    });
};

---------------

Simple call example of this function made in the same file :

---------------

var simpleGetUser = function(userKey, callback){
    this.executeRequest(
    '/user/v1/user/' + userKey,
    {/* If you got any parameters, put them here */},
    function (res) {
        if (callback)
            callback(res);
    }, 'GET');
};

祝你好运！

【讨论】：

【解决方案3】：

一定是 IE10 JavaScript 问题。正如您所指出的，同意 null 必须来自 document.getElementById('root')。您的页面通常不会包含这样的元素，并且名称也没有区别。我怀疑“根”元素是由来自 Google 的另一段 JavaScript 创建的，而其他 JavaScript 代码（默默地）失败了。利用你相当多的 Debug-Fu 朝那个方向看。抱歉，我想提供更多帮助，但这会违反 Microsoft 的条款和条件（如果我不为每个实例付费，我就被禁止运行他们的软件）。

编辑：由于 proxy.html 包含有问题的 JavaScript 代码和“根”元素，Google 可以通过更改元素的顺序来纠正它。明智地，许多作者建议将 JavaScript 定位在 html 正文的底部之前。如果您能够引用自己的 proxy.html 副本，则可以先尝试修复，然后再向 Google 唠叨它。

【讨论】：

根元素实际上是正文中的静态 HTML，位于尝试使用它的脚本标记下方（请参阅问题中的编辑 4）。我很确定，由于这在我玩过的两个 Google 示例中都以相同的方式失败，因此解决方案必须站在 Google 这边。
针对问题编辑 4 更新。
proxy.html 文件由 Google 的云端点基础架构创建和提供；不幸的是，我无法控制它。我只是调用 gapi.client.load("myapiname", ...) 并且在内部 gapi.client.load 正在加载 proxy.html 等等。