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

最新推荐文章于 2024-04-16 18:59:39 发布

weixin_33774615

最新推荐文章于 2024-04-16 18:59:39 发布

阅读量2.2k

点赞数 1

文章标签： json 前端 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/573365

版权

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

代码如下:

 
          <!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引入外部网站的功能模块

weixin_33774615

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用iframe引入外部网站的功能模块

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

扫一扫