Как заставить этот пример кода из MSDN работать в Chrome
MSDN предоставляет следующий код Javascript для запроса API поиска изображений Bing. Он отлично работает в IE, но ломается в Chrome. Как я могу исправить это, чтобы быть совместимым через браузеры?
Пример кода MSDN JSON (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>
Когда я проверяю Javascript с помощью Chrome, я вижу следующую ошибку и предупреждение:
- Uncaught SyntaxError: Неожиданный токен <
- Ресурс интерпретируется как Script, но передается с MIME-типом text/html.
Неожиданная ошибка токена, кажется, относится к searchCallBack. Непонятно, откуда исходит предупреждение типа MIME.
1 ответ
Решение
Я не знаю, будет ли сам пример работать на Chrome, но проблема в следующем:
<script id="searchCallback" type="text/javascript" src="">
Вам придется удалить атрибут "src". Chrome жалуется на несуществующий источник. Это исправит ошибку:
<script id="searchCallback" type="text/javascript">
Не беспокойтесь о предупреждении MIME. Chrome просто жалуется, что MIME-тип сценария неверен, но это не должно вызывать проблем.
РЕДАКТИРОВАТЬ:
Вот рабочее решение для всех браузеров. Chrome & Co. не любит изменять атрибут src тега script. Вместо этого они предпочитают, чтобы тег сценария создавался динамически.
<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>