您的位置：首页 > Web前端 > JavaScript

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

2018-01-02 18:01 696 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航