PHP采集静态页面并把页面css,img,js保存的方法_PHP
本文实例讲述了PHP采集静态页面并把页面css,img,js保存的方法。分享给大家供大家参考。具体分析如下:
这是一个可以获取网页的html代码以及css,js,font和img资源的小工具,主要用来快速获取模板,如果你来不及设计UI或者看到不错的模板,则可以使用这个工具来抓取网页和提取资源文件,提取的内容会按相对路径来保存资源,因此你不必担心资源文件的错误url导入.
首页 index.php,代码如下:
代码如下:
Web Grabber
Url
Save All
List
抓取页面代码 grab.php,代码如下:
代码如下:
/*
* flute
* 2014/03/31
*/
if(isset($_POST['url'])) {
if(isset($_POST['project']) && !is_dir($_POST['project'])) mkdir($_POST['project'], 0777);
echo json_encode(grab($_POST['url']));
}
function grab($url) {
//$url = 'http://ldixing-wordpress.stor.sinaapp.com/uploads/leaves/test.html';
$data = array();
$file = preg_replace('/^.*//', '', $url);
if(($content = file_get_contents($url)) !== false) {
if(isset($_POST['project'])) file_put_contents($_POST['project'].'/'.$file, $content);
$pattern = '/
if(preg_match_all($pattern, $content, $matches)) {
$data['css'] = $matches[2];
}
$pattern = '/
if(preg_match_all($pattern, $content, $matches)) {
$data['js'] = $matches[2];
}
$pattern = '//i';
if(preg_match_all($pattern, $content, $matches)) {
$data['img'] = $matches[2];
}
$pattern = '/url(('|"|s)(.*?)1)/i';
if(preg_match_all($pattern, $content, $matches)) {
$data['src'] = $matches[2];
}
}
return $data;
}
function vardump($obj) {
echo '
'; <br> print_r($obj); <br> echo '
}
?>
保存css,js,img等资源的页面 save.php,代码如下:
代码如下:
/*
* flute
* 2014/03/31
*/
if(isset($_POST['url']) && isset($_POST['project']) && isset($_POST['domain'])) {
extract($_POST);
$url = preg_replace('/?.*$/', '', $url);
$file = $url;
$arr = explode('/', $file);
$length = sizeof($arr);
$filename = $arr[$length - 1];
$root = $project;
$dir = $root;
if($domain == 'http') {
$dir = $root.'/http';
if(!is_dir($dir)) mkdir($dir, 0777);
} else {
$file = $domain.'/'.$url;
for($i = 0; $i
if(!emptyempty($arr[$i])) {
$dir .= '/'.$arr[$i];
if(!is_dir($dir)) mkdir($dir, 0777);
}
}
}
if(!file_exists($dir.'/'.$filename) || filesize($dir.'/'.$filename) == 0) {
$content = file_get_contents($file);
file_put_contents($dir.'/'.$filename, $content);
}
}
?>
使用方法:
1. 打开index页,输入项目名和要抓取的网址,网址必须是文件名结尾,如index.html;
2. 点Get按钮,得到当前页面所有的css,js,img等资源列表;
3. 点击css链接会获取css文件中的背景资源图片,附加在列表后头;
4. 点击Save All即可保存列表中所有的文件,并按相对路径生成;
5. 如果网页上有http远程文件,将会直接保存在http文件夹下;
6. Get和Save有时会失败,没关系重试几次即可。
希望本文所述对大家的php程序设计有所帮助。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



The default style of the Bootstrap list can be removed with CSS override. Use more specific CSS rules and selectors, follow the "proximity principle" and "weight principle", overriding the Bootstrap default style. To avoid style conflicts, more targeted selectors can be used. If the override is unsuccessful, adjust the weight of the custom CSS. At the same time, pay attention to performance optimization, avoid overuse of !important, and write concise and efficient CSS code.

To create a Bootstrap framework, follow these steps: Install Bootstrap via CDN or install a local copy. Create an HTML document and link Bootstrap CSS to the <head> section. Add Bootstrap JavaScript file to the <body> section. Use the Bootstrap component and customize the stylesheet to suit your needs.

How to achieve image centering and scaling in Bootstrap: Use d-flex justify-content-center to center images horizontally. Use align-items-center and fixed parent element height vertically center the image. Use the width and height attributes to control the image size, or use max-width and max-height to limit the maximum size. Use the img-fluid class or responsive design mechanism, such as media queries, to achieve responsive scaling. Optimize image size, control scaling using the object-fit attribute, and follow best practices to ensure performance and maintainability.

Bootstrap's mesh system is a rule for quickly building responsive layouts, consisting of three main classes: container (container), row (row), and col (column). By default, 12-column grids are provided, and the width of each column can be adjusted through auxiliary classes such as col-md-, thereby achieving layout optimization for different screen sizes. By using offset classes and nested meshes, layout flexibility can be extended. When using a grid system, make sure that each element has the correct nesting structure and consider performance optimization to improve page loading speed. Only by in-depth understanding and practice can we master the Bootstrap grid system proficiently.

How to view Bootstrap CSS: Using Browser Developer Tools (F12). Find the "Elements" or "Inspector" tab and find the Bootstrap component. View the CSS styles that the component applies in the Styles panel. Developer tools can be used to filter styles or debug code to gain insight into how it works. Proficient in developer tools and avoid detours.

Bootstrap provides a simple guide to setting up navigation bars: Introducing the Bootstrap library to create navigation bar containers Add brand identity Create navigation links Add other elements (optional) Adjust styles (optional)

To use Bootstrap to layout a website, you need to use a grid system to divide the page into containers, rows, and columns. First add the container, then add the rows in it, add the columns within the row, and finally add the content in the column. Bootstrap's responsive layout function automatically adjusts the layout according to breakpoints (xs, sm, md, lg, xl). Different layouts under different screen sizes can be achieved by using responsive classes.

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
