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

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>
0
Guilherme 9 Окт 2021 в 03:47

2 ответа

Лучший ответ

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

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

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

Подробнее о CORS: https://developer.mozilla.org/en- США / 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>

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

0
Cornelius 9 Окт 2021 в 02:22

С JQuery используйте load (), это просто ..

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

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

VanillaJS используйте fetch. попробуй это :

function AbrirSecao(secao) {
  fetch(secao)
    .then(function(response) {
      return response.text();
    })
    .then(function(body) {
      document.querySelector('#content').innerHTML = body;
    });
}
0
Lesssugar 9 Окт 2021 в 02:28