利用iframe引入外部網站的功能子產品

很多網站有這樣功能，引入其他網站的部分功能子產品，而不是自己開發，因為絕大多數網站都沒有能力做到面面俱到，是以引用其他網站的資源也不失為一種良好的選擇，下面就通過代碼執行個體介紹一下如何實作此功能。

代碼如下:

<code>&lt;!DOCTYPE html&gt;&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>#box{</code>

<code>  </code><code>width:270px;</code>

<code>  </code><code>height:230px;</code>

<code>  </code><code>overflow:hidden;</code>

<code>  </code><code>border:0px;</code>

<code>  </code><code>margin:150px;</code>

<code>}</code>

<code>#position{</code>

<code>  </code><code>width:800px;</code>

<code>  </code><code>height:800px;</code>

<code>  </code><code>margin:-310px 0px 0px -10px;</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"box"</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"position"</code><code>&gt;</code>

<code>  </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

上面的代碼實作引入一個焦點圖輪播效果功能子產品，下面介紹一下它的實作原理。首先使用iframe引入外部網站的頁面，當然這個時候頁面是不符合要求的，肯定不止我們想要的功能子產品，那麼外面再嵌套一層#position元素，這個元素用來定位功能子產品的位置，比如margin:-310px 0px 0px -10px，設定負的上邊距就是為了讓焦點圖恰好位于外層box元素的頂端。最外面一層box元素就是用來限制iframe的大小，總後隻剩下焦點圖這麼一塊内容。

原文釋出時間為：2017-2-17

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落