当前位置： 文江博客话题详情

如何使来自 MSDN 的示例代码在 Chrome 中运行

发布于 2024-12-08 12:32:15 字数 5211 浏览 1 评论 0原文

MSDN 提供了以下用于查询 Bing 图像搜索 API 的 Javascript 代码。它在 IE 中工作正常，但在 Chrome 中崩溃。如何修复它以使其跨浏览器兼容？

MSDN JSON 代码示例（图像 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 时我看到以下错误和警告：

  • Uncaught SyntaxError: Unexpected token <
  • 资源解释为脚本，但以 MIME 类型 text/html 传输。

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

原文

MSDN gives the following Javascript code for querying the Bing Image Search API. It works fine in IE but breaks in Chrome. How can I fix it to be compatible across browsers?

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>

When I inspect the Javascript using Chrome I see the following error and warning:

  • Uncaught SyntaxError: Unexpected token <
  • Resource interpreted as Script but transferred with MIME type text/html.

The unexpected token error seems to refer to searchCallBack. It's not clear where the MIME type warning is coming from.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

他夏了夏天 2024-12-15 12:32:15

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

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

您必须删除“src”属性。 Chrome 抱怨源不存在。
这将修复错误：

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

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

编辑：

这是适用于所有浏览器的可行解决方案。铬和Co. 不喜欢更改脚本标记的 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>

I don't know if the sample itself will work on Chrome, but the issue is this line:

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

You'll have to remove the "src" attribute. Chrome complains about the non-existing source.
This will fix the error:

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

Don't bother about the MIME warning. Chrome just complains that the MIME type of the script is incorrect but this should not cause problems.

EDIT:

Here's a working solution for all browsers. Chrome & Co. don't like changing the src attribute of the script tag. Instead they prefer to get a script tag created dynamically.

<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>
回复 原文
~没有更多了~

关于作者

远昼

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文