如何选择和加载外部页面的内容

Question

在下面的示例中，我有一个选择框，对于所做的每个选择，都会显示一个链接

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>

Answer 1

除非您要从中加载数据的网站与您的网站在同一个域中，否则您将被 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/ 的示例第二个选项从 JSFiddle 主页返回 HTML。由于 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>

（上面的代码示例在这里不起作用）

Answer 2

使用 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;
    });
}