iframe + div大致原理


  • iframe是一种html标签，利用iframe可以随意的嵌套其他网站的内容，当然这个首先需要需要嵌入的页面允许你使用iframe嵌套。iframe可以指定嵌入的大小，边框等等信息。
  • 然后利用div来指定iframe现实的区域。
  • 因此，利用iframe和div两个标签，可以显示嵌入网站指定的某一个区域，从而避开原网站的广告和LOGO。

加入功能示例


  • 使用功能（http://www.atool.org/mamabeat.php）作为一个实例，进行说明如何使用iframe + div在自己的网站中加入这个功能。

  • 代码如下： 
    <div style="width:1000px;overflow:hidden;margin:0 auto;"> <div style="margin-top:-245px;"> <iframe allowTransparency="true" src="http://www.atool.org/mamabeat.php" height="805" width="1000" frameborder="0" scrolling="no"/> </div> </div>


代码说明：



1.<div style="width:1000px;overflow:hidden;margin:0 auto;"> 这一句中比较重要的是width:1000px; 本站中所有width都是1000px，所以这一个基本不用修改，直接使用，如果你想更小，可以相应的修改小一些！



2.<div style="margin-top:-245px;"> 这一句代码中 margin-top:-245px; 是指：功能区域顶部到网页顶部的距离是多少像素，这一句和后面的iframe中的height属性匹配使用，选择功能区域。



3.<iframe allowTransparency="true" src="http://www.atool.org/mamabeat.php" rel="external nofollow" height="805" width="1000" frameborder="0" scrolling="no"/> 这一句中height最重要，表示的意思是：功能区域底部到网页顶部距离是多少像素。



4.基本的代码解释如上所示，可以大致看出一些关系：第三点中的数值 - 第二点中的数值 = 功能区域的高度。



5.其他页面的功能，可以主要调整这两个参数来嵌入到自己网站中，同时不存在本站的广告和LOGO。