当前位置:首页 > 生活志 > 正文

[前端]如何在404页面嵌入腾讯公益下的宝贝回家数据

注:如果您想在您的网站添加一个类似的效果,出于公益性质,我可以无偿为您提供技术支持,愿天下的宝贝都能永伴自己父母身边

宝贝回家/腾讯公益

宝贝回家/腾讯公益

网友@姬长信 下午在博客留言让我帮忙推广下,访问后发现是公益项目,那这个就必须推广了~

原文地址:姬长信API增加宝贝回家|腾讯公益404核心数据

文章里写出了最简单的调用方法,在网站适当的地方插入代码:

<iframe src="https://api.isoyu.com/gy/" frameborder="0" scrolling="no" width="300" height="300"></iframe>

比如网站的侧边栏等地方

如下图,在WordPress里,你可以通过外观-小工具-自定义html来快速的插入这个项目

宝贝回家|腾讯公益

宝贝回家|腾讯公益

附上一张效果图

 

宝贝回家|腾讯公益

宝贝回家|腾讯公益

在他的api列表里还提供了更详细的调用方法:

公益数据——宝贝回家/腾讯公益404核心数据

但是因为我博客布局已经很紧凑(乱)了,所以我在首页和文章页就不再多加这个api,而是转向了404页面

所谓404,即当页面不存在时,网站抛出的一个状态码

在主题里一般可以找到404页面的模板,在适当的位置插入iframe标签

这里需要特别说明一下,因为我的主题是自适应的,而姬长信在给出调用示例的时候规定了iframe的宽度和高度,这就导致我插入他的代码后,有部分公益信息不显示,所以需要改动下

原iframe变更为:

<iframe src="https://api.isoyu.com/gy/" frameborder="0" scrolling="no" width="100%" onload="mu_changeHeight()" id="isoyu_gy"></iframe>

让其宽度适应父窗口

接着因为跨域的原因,不能取到高度,所以用onload来动态加载高度

附js部分

<script type="text/javascript">
function mu_changeHeight(){
var ifm= document.getElementById("isoyu_gy");
ifm.height=document.documentElement.clientHeight;
}
</script>

最终效果图:

宝贝回家|腾讯公益

宝贝回家|腾讯公益


 

本博客资源若无特殊说明,均为和谐版本,无需付费,我不搞软件的会员,也不接受指定的和谐业务。

软件无法下载/安装/其它电脑问题,免费加QQ群(500人):949039296

有问题加上面的群,直接群里问,在线的时候有问必答,私聊一般都不看

想打赏微信扫右边的二维码,不建议超过10元,没指望靠这个养活我

 
文章标题:[前端]如何在404页面嵌入腾讯公益下的宝贝回家数据
本文作者:慕若曦
发表日期:2018-02-28 02:32 星期三    首发于    暮若夕
本文固定链接: https://www.muruoxi.com/live/2120.html
 
文章标签:
上一篇: 下一篇:

5 条评论

评论加载中...
  1. 地板
    品牌策划  

    想家了,看到你的引语

    2018年2月28日 下午5:15 评论
  2. 板凳
    姬长信  

    大佬文采好棒

    2018年2月28日 下午4:11 评论
    • 慕若曦  

      我感受到了来自你的嘲讽……手动屏蔽姜辰不让他看到此文评论

      2018年2月28日 下午4:23 评论
      • 姜辰  

        我看到了,但是却不知道怎么写~

        2018年3月3日 下午11:37 评论
  3. 沙发
    路易大叔  

    干啊绝好眼熟啊 好像添加过了

    2018年2月28日 下午3:43 评论

发表评论

╮( ̄▽ ̄)╭ | (= ̄ω ̄=) | (>﹏<) | Σ( ° △ °|||)︴ | Σ(っ °Д °;)っ | X﹏X | (╯-_-)╯╧╧

小提示:提交评论后刷新本页面即可看到隐藏的文件哦~
十年之约
加载中……