php生成静态页面并预览

时间:2022-02-14 08:13:27

1、什么是静态化

      就比如我们平时写项目的时候,大部分的页面都是会传参数进去,通过php标签把这些参数展示出来。因为我们的参数随时可以变化,所以页面上的内容也跟着参数变化,这就是动态化的页面。与之相反,静态化就是纯粹的html,页面上的内容不需要通过php或者java等编程语言来改变。

      关于静态化的优点,网上也都说的很清楚了,这边不再一一赘述,总之就是打开速度够快,能抗住大流量访问。

2、静态化写法

(1)第一种写法是通过ob_start()缓存来输出

在php文件中编写html代码,然后用bo_get_content获取到,然后输出到html文件,类似于:

<?php
//打开输出控制缓存
ob_start();
echo "<html><head><title>test页面</title></head><body>Hello world</body></html>";
//获取缓冲区的内容
$out = ob_get_contents();
//关闭输出缓存
ob_end_clean();
//打开test.html文件开启写入权限
$fp = fopen("test.html", "w");
if (!$fp) {
echo "Fail";die;
} else {
//写入文件
fwrite($fp, $out);
//关闭文件
fclose($fp);
echo "Success";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
参考:https://www.cnblogs.com/cxx8181602/p/9336656.html
      这种写法个人感觉会稍微乱一点,而且如果页面复杂的话,写出来的php+html代码会有些杂乱,所以博主选用的是第二种方法。

(2)提前写好模板页,然后进行替换

      先准备好静态文件,然后把要替换的部分标出来,如{title},在php程序中用file_get_content获取html文件的内容,然后进行替换,替换之后保存为文件。

模板页:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{top_title}</title>
<link rel="stylesheet" href=" ">
</head>
<body>
<div class="news-details-template">
<h1>{title}</h1>
<div class="author">{author}</div>

<div class="date">{show_time}</div>
<div class="line"></div>
<div>
{content}
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
      我们先编写好模板页面,包括都有哪部分需要替换,基本的样式等,提前写好

php替换:

$path = \Yii::getAlias('@xxx').'/views/site/notice-detail.php';
$content = file_get_contents($path); //引入模板
//获取要替换的值进行字符串的替换
$content = str_replace('{top_title}',$title,$content);
$content = str_replace('{title}',$title,$content);
.......
$dir = $path ."/html/";
if (!file_exists($dir)) {
mkdir($dir);
}
$filename=$dir.'/'.$filename; //这里就不判断html是否存在了,因为写入会覆盖
$result = file_put_contents($filename,$content);//写入内容到对应静态文件中
1
2
3
4
5
6
7
8
9
10
11
12
      大概就是先通过file_get_contents获取模板页的内容,然后通过str_replace进行标签的替换,替换完成之后,通过file_pu_contents写入到新文件即可。生成的html,我们可以生成多个html,让前端根据不同的页面去访问不同的html即可。

三、生成预览
      生成html之后,一般来说是需要预览给工作人员看看的,毕竟人家也不懂技术,不知道到底生成的是啥,哈哈

1、使用dialog打开窗口

静态页:

//这是我们要打开的窗口,先隐藏
<div id="dialog-form-record" style="display:none;">
<div id="Content_record">

</div>
</div>
1
2
3
4
5
6
JS定义底部按钮:

var arrButton = {
"Release": {
'text': '按钮名称',
'priority': 'secondary',
'class': 'btn btn-success',
'id':'',
'click':点击事件
},
"Cancel": {
'text': 'Cancel', //取消按钮
'priority': 'secondary',
"id":'xxx',
'click': function () {
dialogRecord.dialog( "close" );

}
}
};
//定义宽高
dialogRecord = $( "#dialog-form-record" ).dialog({
autoOpen: false,
height: 800,
width: 1400,
modal: true,
buttons:arrButton,
close: function() {
$( "#Content_record" ).html("");
dialogRecord.dialog( "close" );
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
JS打开窗口:

//定义标题和窗口大小
$( "#dialog-form-record" ).dialog( "option", "title", "Preview Html" );

$( "#dialog-form-record" ).dialog({
modal: true,
height: 800,
width: 1400
});

1
2
3
4
5
6
7
8
9
2、使用iframe引入刚才生成的静态文件

(1)js引入iframe

//加个时间戳,防止缓存
for (i in response.)
iframe += "<iframe class='news_iframe' id='iframe"+ i +"' src='"+ response.url.url +"/news/html/"+ response.zh[i] + "?timestamp= " + new Date().getTime() + "'></iframe>";

}
//把iframe写入到html

$( "#en_content" ).html(iframe);
1
2
3
4
5
6
7
8
3、注意:

(1)iframe的src里面不能有空格之类的东西
(2)iframe去除边框
(3)iframe加载速度慢,所以加个onload事件,当iframe加载完之后再显示

var iframe = document.getElementById("iframe" + count);
checkFinishedDownload(iframe);

function checkFinishedDownload(ifr) {
if (ifr.attachEvent) {
ifr.attachEvent("onload", function() {
//iframe加载完成后你需要进行的操作
});
} else {
ifr.onload = function(http://www.my516.com) {
//iframe加载完成后你需要进行的操作

};
}
}
---------------------