Hướng dẫn javascript get html of another page - javascript lấy html của trang khác

Trong một dự án gần đây, tôi cần tải biểu mẫu trên một trang liên hệ trong một cửa sổ phương thức trên một trang khác.

Đó là một thứ gì đó mà bạn đã chuyển sang JQuery, nhưng tôi muốn cho thấy bạn có thể đạt được hiệu ứng tương tự với JavaScript bản địa.

HTML không đồng bộ

Cách tiếp cận này sử dụng API web XMLHTTPREQUEST.

Mặc dù API này được hỗ trợ trở lại IE 7, các yêu cầu HTML chỉ được hỗ trợ trong IE10 và cao hơn. Phương pháp dưới đây bao gồm một bài kiểm tra tính năng và won chạy trong các trình duyệt không được hỗ trợ.

/**
 * Get HTML asynchronously
 * @param  {String}   url      The URL to get HTML from
 * @param  {Function} callback A callback funtion. Pass in "response" variable to use returned HTML.
 */
var getHTML = function ( url, callback ) {

	// Feature detection
	if ( !window.XMLHttpRequest ) return;

	// Create new request
	var xhr = new XMLHttpRequest();

	// Setup callback
	xhr.onload = function() {
		if ( callback && typeof( callback ) === 'function' ) {
			callback( this.responseXML );
		}
	}

	// Get the HTML
	xhr.open( 'GET', url );
	xhr.responseType = 'document';
	xhr.send();

};

Để thay thế toàn bộ nội dung của một trang bằng nội dung từ một trang khác, bạn sẽ làm điều này:

getHTML( '/about', function (response) {
	document.documentElement.innerHTML = response.documentElement.innerHTML;
});

Bạn cũng có thể nhận các yếu tố cụ thể trên trang bằng cách xử lý biến response giống như cách bạn sẽ làm phần tử document trên bất kỳ trang nào khác.

getHTML( '/about', function (response) {
	var someElem = document.querySelector( '#some-elem' );
	var someOtherElem = response.querySelector( '#some-other-elem' );
	someElem.innerHTML = someOtherElem.innerHTML;
});