很多网站有这样功能，引入其他网站的部分功能模块，而不是自己开发，因为绝大多数网站都没有能力做到面面俱到，所以引用其他网站的资源也不失为一种良好的选择，下面就通过代码实例介绍一下如何实现此功能。
代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html><
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
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"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
|
上面的代码实现引入一个焦点图轮播效果功能模块，下面介绍一下它的实现原理。首先使用iframe引入外部网站的页面，当然这个时候页面是不符合要求的，肯定不止我们想要的功能模块，那么外面再嵌套一层#position元素，这个元素用来定位功能模块的位置，比如margin:-310px 0px 0px -10px，设置负的上边距就是为了让焦点图恰好位于外层box元素的顶端。最外面一层box元素就是用来限制iframe的大小，总后只剩下焦点图这么一块内容。
原文发布时间为：2017-2-17
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：利用iframe引入外部网站的功能模块
