一、前言
%20
这篇文章主要是记录一下php生成静态页面的大致步骤，关于页面静态化，大家想必都听说过，但是真正用的时候反而不是很多。有些页面考虑到访问量比较大，页面结构又不常改动的，比如新闻公告等，可以考虑做成静态页面放在服务器上，这样第一是能抗住大流量的访问，第二也是更加安全一些，打开速度上有保证。
%20
二、正文
%20
%20
就比如我们平时写项目的时候，大部分的页面都是会传参数进去，通过php标签把这些参数展示出来。因为我们的参数随时可以变化，所以页面上的内容也跟着参数变化，这就是动态化的页面。与之相反，静态化就是纯粹的html，页面上的内容不需要通过php或者java等编程语言来改变。
%20
关于静态化的优点，网上也都说的很清楚了，这边不再一一赘述，总之就是打开速度够快，能抗住大流量访问。
%20
%20
（1）第一种写法是通过ob_start()缓存来输出
%20
在php文件中编写html代码，然后用bo_get_content获取到，然后输出到html文件，类似于：
%20%20
%20<?php
%20//打开输出控制缓存
%20ob_start();
%20echo%20"<html><head><title>test页面</title></head><body>Hello%20world</body></html>";
%20//获取缓冲区的内容
%20$out%20=%20ob_get_contents();
%20//关闭输出缓存
%20ob_end_clean();
%20//打开test.html文件开启写入权限
%20$fp%20=%20fopen("test.html",%20"w");
%20if%20(!$fp)%20{
%20echo%20"Fail";die;
%20}%20else%20{
%20//写入文件
%20fwrite($fp,%20$out);
%20//关闭文件
%20fclose($fp);
%20echo%20"Success";
%20}
%20%20
参考：
%20
这种写法个人感觉会稍微乱一点，而且如果页面复杂的话，写出来的php+html代码会有些杂乱，所以博主选用的是第二种方法。
%20
（2）提前写好模板页，然后进行替换
%20
先准备好静态文件，然后把要替换的部分标出来，如{title}，在php程序中用file_get_content获取html文件的内容，然后进行替换，替换之后保存为文件。
%20
模板页：
%20%20
<!DOCTYPE%20html>
<html>
<head>
%20<meta%20charset="utf-8">
%20<title>{top_title}</title>
%20<link%20rel="stylesheet"%20href="%20"%20rel="external%20nofollow"%20>
</head>
<body>
<div%20class="news-details-template">
%20<h1>{title}</h1>
%20<div%20class="author">{author}</div>
%20<div%20class="date">{show_time}</div>
%20<div%20class="line"></div>
%20<div>
%20{content}
%20</div>
</div>
</body>
</html>
%20%20
我们先编写好模板页面，包括都有哪部分需要替换，基本的样式等，提前写好
%20
php替换：
%20%20
$path%20=%20\Yii::getAlias('@xxx').'/views/site/notice-detail.php';
$content%20=%20file_get_contents($path);%20//引入模板
%20//获取要替换的值进行字符串的替换
%20$content%20=%20str_replace('{top_title}',$title,$content);
%20$content%20=%20str_replace('{title}',$title,$content);
%20.......
%20$dir%20=%20$path%20."/html/";
%20if%20(!file_exists($dir))%20{
%20mkdir($dir);
%20}
$filename=$dir.'/'.$filename;%20//这里就不判断html是否存在了，因为写入会覆盖
$result%20=%20file_put_contents($filename,$content);//写入内容到对应静态文件中
%20%20
大概就是先通过file_get_contents获取模板页的内容，然后通过str_replace进行标签的替换，替换完成之后，通过file_pu_contents写入到新文件即可。生成的html，我们可以生成多个html，让前端根据不同的页面去访问不同的html即可。
%20
三、生成预览
%20
生成html之后，一般来说是需要预览给工作人员看看的，毕竟人家也不懂技术，不知道到底生成的是啥
%20
%20
静态页：
%20%20
//这是我们要打开的窗口，先隐藏 <div%20id="dialog-form-record"%20style="display:none;"> %20<div%20id="Content_record"> %20 %20</div> %20</div>
%20%20
JS定义底部按钮：
%20%20
%20var%20arrButton%20=%20{
%20"Release":%20{
%20'text':%20'按钮名称',
%20'priority':%20'secondary',
%20'class':%20'btn%20btn-success',
%20'id':'',
%20'click':点击事件
%20},
%20"Cancel":%20{
%20'text':%20'Cancel',%20//取消按钮
%20'priority':%20'secondary',
%20"id":'xxx',
%20'click':%20function%20()%20{
%20dialogRecord.dialog(%20"close"%20);
%20}
%20}
%20};
%20//定义宽高
%20dialogRecord%20=%20$(%20"#dialog-form-record"%20).dialog({
%20autoOpen:%20false,
%20height:%20800,
%20width:%201400,
%20modal:%20true,
%20buttons:arrButton,
%20close:%20function()%20{
%20$(%20"#Content_record"%20).html("");
%20dialogRecord.dialog(%20"close"%20);
%20}
%20});
%20%20
JS打开窗口：
%20%20
//定义标题和窗口大小
%20$(%20"#dialog-form-record"%20).dialog(%20"option",%20"title",%20"Preview%20Html"%20);
%20$(%20"#dialog-form-record"%20).dialog({
%20modal:%20true,
%20height:%20800,
%20width:%201400
%20});
%20%20
%20
（1）js引入iframe
%20%20
//加个时间戳，防止缓存 for%20(i%20in%20response.) %20iframe%20+=%20"<iframe%20class='news_iframe'%20id='iframe"+%20i%20+"'%20src='"+%20response.url.url%20+"/news/html/"+%20response.zh[i]%20+%20"?timestamp=%20"%20+%20new%20Date().getTime()%20+%20"'></iframe>"; %20%20 %20}%20 //把iframe写入到html $(%20"#en_content"%20).html(iframe);%20
%20%20
%20
（1）iframe的src里面不能有空格之类的东西
%20（2）iframe去除边框%20
%20（3）iframe加载速度慢，所以加个onload事件，当iframe加载完之后再显示
%20%20
var%20iframe%20=%20document.getElementById("iframe"%20+%20count);
%20checkFinishedDownload(iframe);
%20
function%20checkFinishedDownload(ifr)%20{
%20if%20(ifr.attachEvent)%20{
%20ifr.attachEvent("onload",%20function()%20{
%20//iframe加载完成后你需要进行的操作
%20});
%20}%20else%20{
%20ifr.onload%20=%20function()%20{
%20//iframe加载完成后你需要进行的操作
%20
%20};
%20}
}
%20%20
最终效果：
%20
%20
以上就是从生成静态页面到预览的整个流程了，博主也是第一次做静态页面相关的东西，还是挺有意思的，打卡记录一下。
%20
希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
%20%20
您可能感兴趣的文章:%20
- %20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
%20
本文由 华域联盟 原创撰写：华域联盟 » php生成静态页面并实现预览功能
转载请保留出处和原文链接：https://www.cnhackhy.com/59853.htm
