js获得参数为<!DOCTYPE html>代码，并渲染展示成页面

最新推荐文章于 2023-10-23 16:36:46 发布

西风XF

最新推荐文章于 2023-10-23 16:36:46 发布

阅读量2k

点赞数

分类专栏： js 文章标签： html js document.documentEle

本文链接：https://blog.csdn.net/qq_36242361/article/details/78954107

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

需求：调用的某接口给返回的参数为<!DOCTYPE html>代码，例如：

，

把获取到的参数渲染展示成页面，title也需改变。

示例：

a.html 获取参数：

<!--a.html 获取参数-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>a</title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<button class="btn">点击</button>
	</body>
	<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// ht为获取到的参数
		var ht = '<!DOCTYPE html>'+
					'<html>'+
						'<head>'+
							'<meta charset="UTF-8">'+
							'<title>cccccc</title>'+
						'</head>'+
						'<body>'+
							'<h1>你好，世界！</h1>'+
						'</body>'+
					'</html>';
		console.log(ht);
		// localStorage.setItem本地存储参数
		localStorage.setItem('html',ht);
		// b页面为渲染展示页面
		$('.btn').on('click',function(){
			window.location.href = 'b.html';
		});
	</script>
</html>

b.html 相当于载体,渲染成获取对应参数的页面：

<!--b.html 相当于载体,渲染成获取对应参数的页面-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>b</title>
	</head>
	<body>
	</body>
	<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// localStorage.getItem获取本地存储中的参数
		var html = localStorage.getItem('html');
		
		// document.documentElement.innerHTML = 参数，渲染页面,title为cccccc
		document.documentElement.innerHTML = html;
		
		// document.write可以改变body里的内容，但是不能改变head标签里内容,且title为b
		// document.write(html);
	</script>
</html>