快捷導(dǎo)航

php生成靜態(tài)頁(yè)面并實(shí)現(xiàn)預(yù)覽功能

更新時(shí)間：2019年06月27日 14:27:58 作者：鐵柱同學(xué)

這篇文章主要為大家詳細(xì)介紹了php生成靜態(tài)頁(yè)面并實(shí)現(xiàn)預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、前言

這篇文章主要是記錄一下php生成靜態(tài)頁(yè)面的大致步驟，關(guān)于頁(yè)面靜態(tài)化，大家想必都聽(tīng)說(shuō)過(guò)，但是真正用的時(shí)候反而不是很多。有些頁(yè)面考慮到訪問(wèn)量比較大，頁(yè)面結(jié)構(gòu)又不常改動(dòng)的，比如新聞公告等，可以考慮做成靜態(tài)頁(yè)面放在服務(wù)器上，這樣第一是能抗住大流量的訪問(wèn)，第二也是更加安全一些，打開(kāi)速度上有保證。

二、正文

1、什么是靜態(tài)化

就比如我們平時(shí)寫(xiě)項(xiàng)目的時(shí)候，大部分的頁(yè)面都是會(huì)傳參數(shù)進(jìn)去，通過(guò)php標(biāo)簽把這些參數(shù)展示出來(lái)。因?yàn)槲覀兊膮?shù)隨時(shí)可以變化，所以頁(yè)面上的內(nèi)容也跟著參數(shù)變化，這就是動(dòng)態(tài)化的頁(yè)面。與之相反，靜態(tài)化就是純粹的html，頁(yè)面上的內(nèi)容不需要通過(guò)php或者java等編程語(yǔ)言來(lái)改變。

關(guān)于靜態(tài)化的優(yōu)點(diǎn)，網(wǎng)上也都說(shuō)的很清楚了，這邊不再一一贅述，總之就是打開(kāi)速度夠快，能抗住大流量訪問(wèn)。

2、靜態(tài)化寫(xiě)法

（1）第一種寫(xiě)法是通過(guò)ob_start()緩存來(lái)輸出

在php文件中編寫(xiě)html代碼，然后用bo_get_content獲取到，然后輸出到html文件，類(lèi)似于：

 <?php
 //打開(kāi)輸出控制緩存
 ob_start();
 echo "<html><head><title>test頁(yè)面</title></head><body>Hello world</body></html>";
 //獲取緩沖區(qū)的內(nèi)容
 $out = ob_get_contents();
 //關(guān)閉輸出緩存
 ob_end_clean();
 //打開(kāi)test.html文件開(kāi)啟寫(xiě)入權(quán)限
 $fp = fopen("test.html", "w");
 if (!$fp) {
 echo "Fail";die;
 } else {
 //寫(xiě)入文件
 fwrite($fp, $out);
 //關(guān)閉文件
 fclose($fp);
 echo "Success";
 }

參考：php輸出控制函數(shù)和輸出函數(shù)生成靜態(tài)頁(yè)面

這種寫(xiě)法個(gè)人感覺(jué)會(huì)稍微亂一點(diǎn)，而且如果頁(yè)面復(fù)雜的話，寫(xiě)出來(lái)的php+html代碼會(huì)有些雜亂，所以博主選用的是第二種方法。

（2）提前寫(xiě)好模板頁(yè)，然后進(jìn)行替換

先準(zhǔn)備好靜態(tài)文件，然后把要替換的部分標(biāo)出來(lái)，如{title}，在php程序中用file_get_content獲取html文件的內(nèi)容，然后進(jìn)行替換，替換之后保存為文件。

模板頁(yè)：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>{top_title}</title>
 <link rel="stylesheet" href=" " rel="external nofollow" >
</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>

我們先編寫(xiě)好模板頁(yè)面，包括都有哪部分需要替換，基本的樣式等，提前寫(xiě)好

php替換：

$path = \Yii::getAlias('@xxx').'/views/site/notice-detail.php';
$content = file_get_contents($path); //引入模板
 //獲取要替換的值進(jìn)行字符串的替換
 $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是否存在了，因?yàn)閷?xiě)入會(huì)覆蓋
$result = file_put_contents($filename,$content);//寫(xiě)入內(nèi)容到對(duì)應(yīng)靜態(tài)文件中

大概就是先通過(guò)file_get_contents獲取模板頁(yè)的內(nèi)容，然后通過(guò)str_replace進(jìn)行標(biāo)簽的替換，替換完成之后，通過(guò)file_pu_contents寫(xiě)入到新文件即可。生成的html，我們可以生成多個(gè)html，讓前端根據(jù)不同的頁(yè)面去訪問(wèn)不同的html即可。

三、生成預(yù)覽

生成html之后，一般來(lái)說(shuō)是需要預(yù)覽給工作人員看看的，畢竟人家也不懂技術(shù)，不知道到底生成的是啥

1、使用dialog打開(kāi)窗口

靜態(tài)頁(yè)：

//這是我們要打開(kāi)的窗口，先隱藏
<div id="dialog-form-record" style="display:none;">
 <div id="Content_record">
 
 </div>
 </div>

JS定義底部按鈕：

 var arrButton = {
 "Release": {
 'text': '按鈕名稱(chēng)',
 'priority': 'secondary',
 'class': 'btn btn-success',
 'id':'',
 'click':點(diǎn)擊事件
 },
 "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" );
 }
 });

JS打開(kāi)窗口：

//定義標(biāo)題和窗口大小
 $( "#dialog-form-record" ).dialog( "option", "title", "Preview Html" );

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

2、使用iframe引入剛才生成的靜態(tài)文件

（1）js引入iframe

//加個(gè)時(shí)間戳，防止緩存
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寫(xiě)入到html

$( "#en_content" ).html(iframe);

3、注意：

（1）iframe的src里面不能有空格之類(lèi)的東西
（2）iframe去除邊框
（3）iframe加載速度慢，所以加個(gè)onload事件，當(dāng)iframe加載完之后再顯示

var iframe = document.getElementById("iframe" + count);
 checkFinishedDownload(iframe);
 
function checkFinishedDownload(ifr) {
 if (ifr.attachEvent) {
 ifr.attachEvent("onload", function() {
 //iframe加載完成后你需要進(jìn)行的操作
 });
 } else {
 ifr.onload = function() {
 //iframe加載完成后你需要進(jìn)行的操作
 
 };
 }
}

最終效果：