En el ejemplo a continuación, tengo un cuadro de selección que para cada selección realizada, se muestra un enlace
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>En cambio, necesitaba que al seleccionar la opción, la página cargara el contenido de una página externa, como se muestra a continuación:
<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>A menos que los sitios web desde los que desea cargar datos estén en el mismo dominio que el suyo, la política de CORS lo bloqueará.
Si tiene control sobre los servidores del sitio web de los que necesita obtener contenido, puede usar fetch():
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Más sobre CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Aquí hay un ejemplo usando fetch() https://jsfiddle.net/v4uL0na2/ La segunda opción devuelve HTML desde la página de inicio de JSFiddle. La segunda opción da como resultado un error debido a 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>(El ejemplo de código anterior no funcionará aquí)
con Jquery usa load(), es simple..
$('#siteloader').load('http://www.your-link.com'); function AbrirSecao(secao) { $('#content').load(secao); }VanillaJS usa fetch. prueba esto :
function AbrirSecao(secao) { fetch(secao) .then(function(response) { return response.text(); }) .then(function(body) { document.querySelector('#content').innerHTML = body; }); }