利用iframe引入外部網站的功能模組

admin發表於2017-02-17
網站
很多網站有這樣功能，引入其他網站的部分功能模組，而不是自己開發，因為絕大多數網站都沒有能力做到面面俱到，所以引用其他網站的資源也不失為一種良好的選擇，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:270px;
  height:230px;
  overflow:hidden;
  border:0px;
  margin:150px;
}
#position{
  width:800px;
  height:800px;
  margin:-310px 0px 0px -10px;
}
</style>
</head>
<body>
<div id="box">
  <div id="position">
    <iframe src="http://www.softwhy.com/" width="960" height="1280"></iframe>
  </div>
</div>
</div>
</body>
</html>

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

相關文章