如何从MSDN中使此示例代码在Chrome中运行

时间：2011-10-05 19:57:04

标签： javascript google-chrome bing-api

MSDN提供以下用于查询Bing Image Search API的Javascript代码。它在IE中运行良好但在Chrome中中断。如何修复它以跨浏览器兼容？

MSDN JSON Code Sample (Image SourceType) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bing API 2.0 Image Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script id="searchCallback" type="text/javascript" src="">
    </script>

    <script type="text/javascript">

    // Replace the following string with the AppId you received from the
    // Bing Developer Center.
    var AppId = "AppID Intentionally Omitted";

    // Bing API 2.0 code sample demonstrating the use of the
    // Image SourceType over the JSON Protocol.
    function Search()
    {
        var requestStr = "http://api.bing.net/json.aspx?"

            // Common request fields (required)
            + "AppId=" + AppId
            + "&Query=xbox site:microsoft.com"
            + "&Sources=Image"

            // Common request fields (optional)
            + "&Version=2.0"
            + "&Market=en-us"
            + "&Adult=Moderate"

            // Image-specific request fields (optional)
            + "&Image.Count=10"
            + "&Image.Offset=0"

            // JSON-specific request fields (optional)
            + "&JsonType=callback"
            + "&JsonCallback=SearchCompleted";  

         var requestScript = document.getElementById("searchCallback");
         requestScript.src = requestStr;
    }

    function SearchCompleted(response)
    {
        var errors = response.SearchResponse.Errors;
        if (errors != null)
        {
            // There are errors in the response. Display error details.
            DisplayErrors(errors);
        }
        else
        {
            // There were no errors in the response. Display the
            // Image results.
            DisplayResults(response);
        }
    }

    function DisplayResults(response)
    {
        var output = document.getElementById("output");
        var resultsHeader = document.createElement("h4");
        var resultsList = document.createElement("ul");
        output.appendChild(resultsHeader);
        output.appendChild(resultsList);

        var results = response.SearchResponse.Image.Results;

        // Display the results header.
        resultsHeader.innerHTML = "Bing API Version "
            + response.SearchResponse.Version
            + "<br />Image results for "
            + response.SearchResponse.Query.SearchTerms
            + "<br />Displaying "
            + (response.SearchResponse.Image.Offset + 1)
            + " to "
            + (response.SearchResponse.Image.Offset + results.length)
            + " of "
            + response.SearchResponse.Image.Total
            + " results<br />";

        // Display the Image results.
        var resultsListItem = null;
        for (var i = 0; i < results.length; ++i)
        {
            resultsListItem = document.createElement("li");
            resultsList.appendChild(resultsListItem);
            resultsListItem.innerHTML = "<a href=\""
                + results[i].MediaUrl
                + "\"><img src=\""
                + results[i].Thumbnail.Url
                + "\"></a><br /><a href=\""
                + results[i].Url
                + "\">"
                + results[i].Title
                + "</a><br />Dimensions: "
                + results[i].Width
                + "x"
                + results[i].Height
                + "<br /><br />";
        }
    }

    function DisplayErrors(errors)
    {
        var output = document.getElementById("output");
        var errorsHeader = document.createElement("h4");
        var errorsList = document.createElement("ul");
        output.appendChild(errorsHeader);
        output.appendChild(errorsList);

        // Iterate over the list of errors and display error details.
        errorsHeader.innerHTML = "Errors:";
        var errorsListItem = null;
        for (var i = 0; i < errors.length; ++i)
        {
            errorsListItem = document.createElement("li");
            errorsList.appendChild(errorsListItem);
            errorsListItem.innerHTML = "";
            for (var errorDetail in errors[i])
            {
                errorsListItem.innerHTML += errorDetail
                    + ": "
                    + errors[i][errorDetail]
                    + "<br />";
            }

            errorsListItem.innerHTML += "<br />";
        }
    }

    </script>

</head>
<body onload="Search()">
    <div id="output"></div>
</body>
</html>

当我使用Chrome检查Javascript时，我看到以下错误和警告：

  • 未捕获的SyntaxError：意外的标记＆lt;
  • 资源解释为脚本，但使用MIME类型text / html传输。

意外的令牌错误似乎是指searchCallBack。目前尚不清楚MIME类型警告的来源。

1 个答案:

答案 0 :(得分：1)

我不知道示例本身是否适用于Chrome，但问题在于这一行：

 <script id="searchCallback" type="text/javascript" src="">

您必须删除“src”属性。 Chrome抱怨不存在的来源。 这将解决错误：

 <script id="searchCallback" type="text/javascript">

不要理会MIME警告。 Chrome只是抱怨脚本的MIME类型不正确，但这不会导致问题。

修改

这是适用于所有浏览器的可行解决方案。 Chrome＆amp;公司不喜欢改变脚本标签的src属性。相反，他们更喜欢动态创建脚本标记。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bing API 2.0 Image Sample</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript">

    // Replace the following string with the AppId you received from the
    // Bing Developer Center.
    var AppId = "1DB8A37DAB934B531CDC74CF614F386431D69FD3";

    // Bing API 2.0 code sample demonstrating the use of the
    // Image SourceType over the JSON Protocol.
    function Search()
    {
        var requestStr = "http://api.bing.net/json.aspx?"

            // Common request fields (required)
            + "AppId=" + AppId
            + "&Query=xbox site:microsoft.com"
            + "&Sources=Image"

            // Common request fields (optional)
            + "&Version=2.0"
            + "&Market=en-us"
            + "&Adult=Moderate"

            // Image-specific request fields (optional)
            + "&Image.Count=10"
            + "&Image.Offset=0"

            // JSON-specific request fields (optional)
            + "&JsonType=callback"
            + "&JsonCallback=SearchCompleted";  

         var elHead= document.getElementsByTagName("head")[0];
         var oScript = document.createElement("script");
         oScript.type= 'text/javascript';
         oScript.src= requestStr;
         elHead.appendChild(oScript);
    }

    function SearchCompleted(response)
    {
        var errors = response.SearchResponse.Errors;
        if (errors != null)
        {
            // There are errors in the response. Display error details.
            DisplayErrors(errors);
        }
        else
        {
            // There were no errors in the response. Display the
            // Image results.
            DisplayResults(response);
        }
    }

    function DisplayResults(response)
    {
        var output = document.getElementById("output");
        var resultsHeader = document.createElement("h4");
        var resultsList = document.createElement("ul");
        output.appendChild(resultsHeader);
        output.appendChild(resultsList);

        var results = response.SearchResponse.Image.Results;

        // Display the results header.
        resultsHeader.innerHTML = "Bing API Version "
            + response.SearchResponse.Version
            + "<br />Image results for "
            + response.SearchResponse.Query.SearchTerms
            + "<br />Displaying "
            + (response.SearchResponse.Image.Offset + 1)
            + " to "
            + (response.SearchResponse.Image.Offset + results.length)
            + " of "
            + response.SearchResponse.Image.Total
            + " results<br />";

        // Display the Image results.
        var resultsListItem = null;
        for (var i = 0; i < results.length; ++i)
        {
            resultsListItem = document.createElement("li");
            resultsList.appendChild(resultsListItem);
            resultsListItem.innerHTML = "<a href=\""
                + results[i].MediaUrl
                + "\"><img src=\""
                + results[i].Thumbnail.Url
                + "\"></a><br /><a href=\""
                + results[i].Url
                + "\">"
                + results[i].Title
                + "</a><br />Dimensions: "
                + results[i].Width
                + "x"
                + results[i].Height
                + "<br /><br />";
        }
    }

    function DisplayErrors(errors)
    {
        var output = document.getElementById("output");
        var errorsHeader = document.createElement("h4");
        var errorsList = document.createElement("ul");
        output.appendChild(errorsHeader);
        output.appendChild(errorsList);

        // Iterate over the list of errors and display error details.
        errorsHeader.innerHTML = "Errors:";
        var errorsListItem = null;
        for (var i = 0; i < errors.length; ++i)
        {
            errorsListItem = document.createElement("li");
            errorsList.appendChild(errorsListItem);
            errorsListItem.innerHTML = "";
            for (var errorDetail in errors[i])
            {
                errorsListItem.innerHTML += errorDetail
                    + ": "
                    + errors[i][errorDetail]
                    + "<br />";
            }

            errorsListItem.innerHTML += "<br />";
        }

    }

    </script>

</head>
<body onload="Search()">
    <div id="output"></div>
</body>
</html>
相关问题
最新问题