Como no siempre tienes el control sobre los ids que pueda haber en otras páginas, quizá sea interesante para ti usar $.get
.
Así, podrás trabajar con la respuesta. Puedes crear un DOM con la respuesta usando DOMParser y acceder al body mediante elementoDOM.body
, o a cualquier elemento sin tener que depender de que éste tenga un id o algún selector.
Veamos una prueba, poniendo el body
de la respuesta en el div
cuyo id es resultado
:
var url = 'https://www.w3.org/TR/xhtml1/';
$.get(url, function(data) {
DOMparser = new DOMParser();
DOMdata = DOMparser.parseFromString(data, 'text/html');
var bodyHTML = DOMdata.body;
/*En el caso de elementos como body deberás usar replace, para que no lo duplique*/
// $('body').replaceWith(bodyHTML);
$('#resultado').html(bodyHTML);
console.log(bodyHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultado"></div>
Ahora un ejemplo usando $.ajax
:
/*Usando $.ajax*/
var url = 'https://developer.mozilla.org/es/docs/Web/HTML';
var request = $.ajax({
url: url,
method: "GET",
dataType: "html"
});
request.done(function(data) {
DOMparser = new DOMParser();
DOMdata = DOMparser.parseFromString(data, "text/html");
var bodyHTML = DOMdata.body;
$('#resultado').html(bodyHTML);
});
request.fail(function(jqXHR, textStatus) {
alert("Error : " + textStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultado"></div>
NOTA:
En el caso concreto del body
, si tú haces esto:
$("body").html(bodyHTML);
te va a duplicar el body
.
Deberás usar en ese caso:
$("body").replaceWith(bodyHTML);