php生成静态页面并预览

最新推荐文章于 2023-11-30 10:43:13 发布

铁柱同学

最新推荐文章于 2023-11-30 10:43:13 发布

阅读量3k

点赞数 20

分类专栏： php日常bug 文章标签： php 静态页面预览

本文链接：https://blog.csdn.net/LJFPHP/article/details/93846093

版权

php日常bug 专栏收录该内容

87 篇文章 4 订阅

订阅专栏

一、前言

最近要找房子搬家，作为一名青漂，每年换房子都要成为习惯了，不过还好，偌大的城市还能容得下身体和灵魂。

这篇文章主要是记录一下php生成静态页面的大致步骤，关于页面静态化，大家想必都听说过，但是真正用的时候反而不是很多。有些页面考虑到访问量比较大，页面结构又不常改动的，比如新闻公告等，可以考虑做成静态页面放在服务器上，这样第一是能抗住大流量的访问，第二也是更加安全一些，打开速度上有保证。

二、正文

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";
    }

参考：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>

我们先编写好模板页面，包括都有哪部分需要替换，基本的样式等，提前写好

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);//写入内容到对应静态文件中

大概就是先通过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>

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" );
        }
    });

JS打开窗口：

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

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

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);

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() {
            //iframe加载完成后你需要进行的操作
       
        };
    }
}

最终效果：

在这里插入图片描述