Блог

В приведенном ниже примере у меня есть поле выбора, в котором для каждого сделанного выбора отображается ссылка

 function AbrirSecao(secao) {
      let display = document.getElementById('content')
      display.textContent = secao
     }


<select name="unidade" id="unidade" onChange="AbrirSecao(this.value)">
  <option value="">Selecione sua Cidade</option>
  <option value="http://www.google.com.br#one">Sua Cidade 1</option>
  <option value="http://www.google.com.br#two">Sua Cidade 2</option>
</select>
<p id="content"></p>
 

Вместо этого мне нужно было, чтобы при выборе опции страница загружала содержимое внешней страницы, как показано ниже:

 <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula 
   tortor metus, laoreet condimentum urna aliquet vitae. Aliquam eu felis 
   malesuada, maximus risus nec, aliquet leo</p>
 

Если веб-сайты, с которых вы хотите загружать данные, не находятся в том же домене, что и ваш, вы будете заблокированы в соответствии с политикой CORS.

Если у вас есть контроль над серверами веб-сайтов, с которых вам нужно получать контент, вы можете использовать функцию fetch():

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Подробнее о CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Вот пример использования функции fetch() https://jsfiddle.net/v4uL0na2/ Второй вариант возвращает HTML с домашней страницы JSFiddle. Второй вариант приводит к ошибке из-за CORS.

     function AbrirSecao(secao) {
      let display = document.getElementById('content')

      fetch(secao).then(function(response) {
        // The API call was successful!
        return response.text();
      }).then(function(html) {
        // This is the HTML from our response as a text string
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, 'text/html');
        const element = doc.querySelector('body > *');
        display.appendChild(element);
      }).catch(function(err) {
        // There was an error
        console.warn('Something went wrong.', err);
      });
    } 

 <select name="unidade" id="unidade" onChange="AbrirSecao(this.value)">
  <option value="">Selecione sua Cidade</option>
  <option value="/">jsfiddle</option>
  <option value="http://www.google.com.br#two">Sua Cidade 2</option>
</select>
<p id="content"></p> 

(Приведенный выше пример кода здесь работать не будет)

с помощью Jquery используйте load(), это просто..

 $('#siteloader').load('http://www.your-link.com');

function AbrirSecao(secao) {
  $('#content').load(secao);
}
 

Ванилайи используют fetch. попробуйте это :

 function AbrirSecao(secao) {
  fetch(secao)
    .then(function(response) {
      return response.text();
    })
    .then(function(body) {
      document.querySelector('#content').innerHTML = body;
    });
}