js获得参数为代码,并渲染展示成页面

2018-01-03 20:04:44来源:CSDN作者:qq_36242361人点击

分享

需求:调用的某接口给返回的参数为<!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>



================================================================================================

修改:

document.documentElement.innerHTML方法不能执行渲染展示的js,如图:


用document.documentElement.innerHTML执行后,button点击无效;

最后选择的方法是document.write();

相对于功能来说title是次要的,可以自己事先定义好需要的title;

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台