您的位置：首页 > 运维架构 > 网站架构

网站中嵌入在线api

2013-09-21 18:23 375 查看
网站中嵌入在线api，便于查看，实际很简单，使用iframe既可以搞定

<html>

<head>

  <title>在线文档-jdk-zh</title>  

  <style>

  body {margin:0;padding:0;}

  iframe {margin:0;width:100%;}

  #apidoc_top {background:#006CBF;color:#fff;font-size:12pt;padding:2px 2px;width:600px;float:right;position:absolute;right:10px;top:20px;}

  #apidoc_top a {color:#fff;text-decoration:none;}

  #apidoc_top a:hover {color:#ff0;}

  #apidoc_top span {float:right;font-family:"Lucida Grande",Calibri,Arial,sans-serif;color:#DDD;}

  #apidoc_top span a {padding-right:5px;color:#fff;}

  </style>

</head>

<body>

<style>

h1{margin:0;padding:0;}

#header{background: #006cbf url(/img/headerBg.gif) left bottom repeat-x;height: 55px;position: relative;z-index: 1;}

#logo{background: url("/img/logo.gif") no-repeat;line-height: 50px;cursor:pointer;width:250px;margin:0 0 0 10px;}

.texthidden{text-indent:-9999px;white-space:nowrap;line-height:0;}

</style>

<!--     Tools头部header开始    -->

<div id="header">

    <div>        

        <div id="logo" class="texthidden" onClick="javascript:location.href='/'">

            <h1>xxx在线工具</h1>

        </div>

        <div id="apidoc_top">

    <span>

    <a href="/apidocs"><strong>返回API文档列表</strong></a>  

        热门文档：

      <a href="?api=jdk_7u4">JDK7</a>

      <a href="?api=javaEE6">J2EE6</a>

      <a href="?api=Spring-3.1.1">Spring</a>

      <a href="?api=hibernate-4.1.4">Hibernate</a>

      <a href="?api=php-zh">jquery文档</a>

    </span>

</div>    </div>

</div>

<!--     Tools头部header结束    -->  

<table width='100%'><tr><td>

  <iframe id='iframe_doc' frameborder='0'

         src='文档主页的位置一般为index.html'

   onload='this.height=document.body.clientHeight-80;'></iframe>

  </td></tr></table>

  </div>

</body>

</html>

填充对应的src 即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航