实战经验分享:怎么在自己的网站里面调用第三方网站的页面内容

yumo6665个月前 (04-26)技术文章41

今日,站长在线(olzz.com)的首页右侧边栏里面,有一个是【mip验证】的工具入口,其实我在其他网站也放了这个入口,但是不同的是,以前的页面入口是直接链接到百度mip官方的页面检测地址的,而今天,我这个网站的页面地址改成自己的网站地址,为:https://www.olzz.com/mip/

使用这样做的方法显著的好处就是,可以把网站的流量放在自己的网站里面,知道使用这个工具的人有多少,一样的使用效果,却给自己带来更多的浏览量,何乐不为呢?



接下来,站长在线的站长就开始,对代码进行尝试添加了:

1、确立MIP标准。因为站长在线的主站是mip技术的,所以我想在这个新建的内页也使用mip技术,所以首先制作一个index.html的静态的MIP单页面,然后把mip技术的标准页面的空白文件制作出来,代码我就是不一一解释怎么来了,直接上代码了:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="当前mip页面地址">
<meta name="Author" Content="作者">
<meta name="Keywords" Content="关键词">
<meta name="Description" Content="页面描述">

</head>
<body>
 正文内容
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

空白文件制作好了,就开始填充内容,最后本页面里面,还要添加cnzz统计和百度统计。

1、添加百度mip检测的页面调用代码,并且让他居中显示:

<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>

2、添加cnzz统计、百度统计的代码。

<mip-stats-cnzz token="1278700007"></mip-stats-cnzz><!--cnzz统计ID-->
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu><!--百度统计ID-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->

3、合并所有代码,完整的代码如下:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP页面检测,查看是否符合百度mip页面标准</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="https://www.olzz.com/mip/">
<meta name="Author" Content="杨泽业">
<meta name="Keywords" Content="mip,mip检测,MIP页面检测">
<meta name="Description" Content="这是由站长在线站长杨泽业手工开发的mip页面检测网页,通过本页面的检测,可以让你知道你的网站,是否符合mip页面的技术标准">
</head>
<body>
 <div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz>
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu>
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

总结:通过本内容的学习,可以让你知道,怎么在自己的网站里面调用第三方网站的页面内容,新手朋友们自己亲自实践一下,举一反三,让自己的建站水平稳步提升。

欢迎关注站长快递头条号,一起学习建站知识,一起成长!

相关文章

用CSS实现居中的七种方法

微信ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)● ● ●在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是...

css布局方案汇总(28个实例图文并茂)

简介布局在我们前端日常开发来说是非常重要的,一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(fl...

零基础10天学会网页制作第二天(下)之表格table标签

我们继续往下讲述,关于a标签的跳转,我们用到的是href属性,href里面对应的就是我们需要跳转的地址,可以是本地文件的跳转,也可以是网络地址的跳转,这个很简单了,就不过多做赘述了。大家有没有发现,在...

CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)

像 px、em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。一、基本说明1,vw、vh、vmin、...

Canvas学习笔记 | 文本操作

#头条创作挑战赛#简介在Canvas中,文本操作的常用方法有:方法说明fillText()绘制实心文本strokeText()绘制空心文本measureText()获取文本长度在Canvas中,文本操...

前端面试-关于position定位的哪些问答

前端面试中,position定位绝对算是出现的频繁的一个面试题了,我们这次来共享下关于这个属性可以问出怎么样的问题。CSS 的 position 属性用于控制元素的定位方式,共有五种值:static、...