Npcink Blog
切换菜单

远程广告解决方法分销 - 经验教程

通过 js 在指定 div 里输出 HTM，从而实现一个简单的远程广告解决方案

最后更新于
本页目录5 节

陆陆续续的，已经发布了不少有趣的区块，但在实际的运用中，发现很有一部分人直接在线看区块页面，直接 F12 抓取代码，尽管这个过程对于熟练的人而言很快，但在这个很快的过程中，透明大都很专注，注意力集中，而且这类访客目的都很明显，。

待的时间精力足够集中，目的明显？

这不就是一个很好的卖广告的地方嘛(。・∀・)ノ

演示

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<!--广告内容开始-->
    <div id="npcink-ad-page"></div>
    <script type="text/javascript" src="https://cdn.getimg.net/npc/ad/page.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.getimg.net/npc/ad/page.css">
    <!--广告内容结束-->

方案思路

出于于广告内容的多变性，在页面中的内容需要动态，考虑到是在 html 页面中，可以用 JS 来解决，为了外观好看，也加上一个 css。

我将 JS 和 CSS 保存在服务器中，这样，只需要更改服务器中的 JS 和 CSS，就可以控制区块页面里的内容了。

解决方法

在页面的适当位置添加以下代码，一般是在页底标签</body>上方。

      <!--广告内容开始-->
  <div id="npcink-ad-page"></div>
  <script type="text/javascript" charset="utf-8" src="page.js"></script>
  <link type="text/css" rel="stylesheet" href="page.css"/>
  <!--广告内容结束-->

JS 控制显示内容

document.getElementById("npcink-ad-page").innerHTML = "<div class=demo-class>广告位招租，QQ：1355471563</div>";

CSS 控制外观样式

@charset "utf-8";
/*CSS代码*/
.demo-class {
    font-size: 12px;
    text-align: center;
}