利用iframe引入外部网站的功能模块-阿里云开发者社区

开发者社区> 青衫无名> 正文

利用iframe引入外部网站的功能模块

简介:
+关注继续查看
很多网站有这样功能,引入其他网站的部分功能模块,而不是自己开发,因为绝大多数网站都没有能力做到面面俱到,所以引用其他网站的资源也不失为一种良好的选择,下面就通过代码实例介绍一下如何实现此功能。

代码如下:


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">
<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的大小,总后只剩下焦点图这么一块内容。



原文发布时间为:2017-2-17

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:利用iframe引入外部网站的功能模块

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
带你读《未来保险新金融时代-重塑保险硬核科技》第五章保险核心科技(一)
带你读《未来保险新金融时代-重塑保险硬核科技》第五章保险核心科技
8 0
什么是 SAP 电商云 Spartacus UI 的 proxy facade
什么是 SAP 电商云 Spartacus UI 的 proxy facade
4 0
html 前端总结
一、web与HTML的基本介绍 1.HBuilder 工具使用(百度搜索下载就可以) !!!所有双引号都是英文的!!! 段落标签:p 他也是一个双标签 换行标签:br 他是一个单标签 空格符号:&nbsp ;
11 0
SAP Commerce Cloud SmartEdit 学习笔记
SAP Commerce Cloud SmartEdit 学习笔记
6 0
CSS前端总结
一、CSS基本介绍 1、在web中标准中具体的要求是:结构.样式.行为三者相分离 2、2、CSS的作用是修饰当前网页中html元素
5 0
SAP 电商云 Spartacus UI 支持延迟加载的新功能的入口设计
SAP 电商云 Spartacus UI 支持延迟加载的新功能的入口设计
5 0
Angular Public API 接口设计
Angular Public API 接口设计
4 0
知识图谱 | 从六个方面解析知识图谱的价值和应用
知识图谱 | 从六个方面解析知识图谱的价值和应用
3 0
关于 SAP Spartacus feature library 里的 _index.scss 文件
关于 SAP Spartacus feature library 里的 _index.scss 文件
4 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载