原生js+ajax实现获取html文件指定内容部分(含css)

PS:不适用于相对路径style

request.html



<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			p{text-align: center;background: saddlebrown;color: white;}
		style>
	head>
	<body>
		<div>
			<p>通过ajax获取另一个htmlp>
			<a href="https://www.baidu.com">百度a>
		div>
	body>
html>

index.html



<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h3>获取另一个html文档h3>
		<div id="demo">div>
		<script>
			var request;
			if (window.XMLHttpRequest) {
				request = new XMLHttpRequest();
			} else {
				request = new ActiveXObject('Microsoft.XMLHTTP');
			}
			request.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					var demo = document.getElementById('demo');
					demo.innerHTML = this.responseText;
					
					var childs = demo.childNodes;

					//移除不需要的节点
					for (var i=0; i<childs.length; i++) {
						if (childs[i].nodeName === 'META' || childs[i].nodeName === 'TITLE') {
							demo.removeChild(childs[i]);
						}
					}
				}
			}
			request.open('GET','request.html',true);
			request.send(null);
			
			//释放内存,销毁script
			document.body.removeChild(document.body.lastChild);
		script>
	body>
html>

demo

原生js+ajax实现获取html文件指定内容部分(含css)_第1张图片

你可能感兴趣的:(【小技巧】,JavaScript)