Вы должны смотреть, как Javascript может манипулировать DOM - добавлять и удалять элементы, текст изменений и HTML и т.д. Я также рекомендую проверить JQuery в качестве исходного браузера Javascript стремится получить очень грязный, очень быстро. Очень рекомендуется от тех, кто избегает библиотек, когда это возможно.
Вы можете довольно легко установить расположение окна в большинстве случаев с
window.location = url; // eg, 'https://google.com'
Например, если я открываю это с file:// URL в браузере, это работает:
<script>
url = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=-93.243956,44.909974&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw'
function setLocation(){
window.location = url;
}
</script>
<body onLoad='setLocation()' >
</body>
Это должно по существу иметь тот же результат нажатия соответствующей ссылки. К сожалению, я не мог заставить его работать в фрагменте переполнения стека, но я тестировал содержимое в файле локально и перенаправлял его в порядке. Если это не сработает для вас, я бы рекомендовал опубликовать более полный пример.
Если вы хотите оставить и другие материалы на странице, у вас есть несколько вариантов. Некоторые API-интерфейсы позволяют звонить из AJAX или iframe - другие могут использовать аутентификацию, CORS или некоторые другие способы запретить.
Из приведенных ниже примеров очевидно, что Google отклоняет эти запросы, установив соответствующие заголовки (в консоли браузера объясняется, что отображение заблокировано). Это не редкость для таких людей, как Google, защищать свои бесплатные API-интерфейсы с помощью механизмов, чтобы попытаться остановить ребят от ребрендинга своих продуктов или злоупотребления их предложениями. Я уверен, что если вы посмотрите на документацию для API, которую вы пытаетесь использовать, он объяснит, как вы можете аутентифицировать эти запросы для пользователя.
Ниже приведен пример, который манипулирует DOM несколькими способами: с innerHTML, ванильным браузером браузера и с JQuery ($ является синонимом интерфейса JQuery) - что вы увидите намного проще (что вы можете не видеть, как трудно делать вещи без jquery через все соответствующие веб-браузеры!). Если вы поменяете URL-адрес, вы увидите, что команды работают, когда ответ URL-адреса позволяет браузеру отображать их.
function showlocation()
{
//navigator.geolocation.getCurrentPosition(callback);
callback({ coords: { longitude: 44.909974, latitude: -93.243956 } });
}
function callback(position)
{
var str = "Free Web Building Tutorials!";
var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+position.coords.latitude+","+position.coords.longitude+"&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw";
document.getElementById("demo").innerHTML = str.link(url);
document.getElementById("iframe").src = url;
ajax(url);
}
function ajax(url){
$('#ajaxres').html("Loading...");
$.ajax({
url: url,
success: function(result, status){
$('#ajaxres').html(result);
},
error: function(req, status, msg){
$('#ajaxres').html("Error! Status: " + status + ", message: <code>"+msg+"</code>, Response: <pre> " + JSON.stringify(req) + "</pre>");
}
})
}
body {
background-color: aquamarine;
}
code:before {
content: "'";
}
code:after {
content: "'";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script>
</script>
</head>
<body onLoad="showlocation();">
<p id="demo"></p>
<p>This won't work because X-Frame-Options header of the response is SAMEORIGIN (see browser console for errors). You'll just see an empty box with an ugly 90s border (but ymmv):</p>
<iframe id='iframe'></iframe>
<p>The AJAX also doesn't work because </code> the Access-Control-Allow-Origin header is present on the requested resource</code> (see console)</p>
<div id='ajaxres'></div>
</body>
</html>
Вы можете попробовать использовать Ajax взял загрузить цель ссылки и сбросить HTML ответа в ваш DOM; он должен работать, только если Google maps api Конфигурация CORS позволяет использовать вызовы ajax из любого источника. В противном случае вы можете использовать iframe с источником так же, как и ссылку, которую вы создаете. –
Спасибо Dan за ваш ответ .. Я думал использовать iframe, но я не могу понять, как вернуть URL из функции showlocation .. потому что функция showlocation вызывает функцию обратного вызова. Не могли бы вы помочь мне вернуть URL-адрес из функции showlocation? – sumit
Почему бы просто не вставить в DOM так же, как вы делаете якорь?То есть обновить DOM из обратного вызова! –