使用Fancybox实现iframe弹出框

sweet浅笑

于 2021-08-05 14:12:12 发布

阅读量708

点赞数 1

本文链接：https://blog.csdn.net/sjm926/article/details/119416230

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前景

公司要求封装一个js来实现一个弹出框的广告，以便外部的平台来调用。正好js~fancybox为我们提供了iframe功能。我们可以直接使用，不用自己去实现。

fancybox介绍

官网地址：http://www.fancybox.net/

需要注意的是：This site is kept for historical purposes and represents original version of the Fancybox. V4 (the latest), V3 (discontinued) 目前的版本是V4，V3已经停止更新了。

实现

我们此次是用的js，所以还是使用的他的V3的版本，要特别注意：

1.引用的fancybox版本必须是3.*，否则会报错。

2.必须要在引入fancybox.js之前引入jquery.js

以下是我自己封装的index.js文件：

function openIFrame(){
    let head = document.getElementsByTagName('head')[0];
	var script1 = document.createElement('script');
    script1.setAttribute('type','text/javascript');
    script1.setAttribute('src','https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js');
    head.appendChild(script1);
    var script2 = document.createElement('script');
    script2.setAttribute('type','text/javascript');
    script2.setAttribute('src','https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.js');
    head.appendChild(script2);
    var link = document.createElement('link');
    link.setAttribute('rel','stylesheet');
    link.setAttribute('href','https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.css');
    head.appendChild(link);
	setTimeout(function(){  
       $.fancybox.open({
           src: '****.html',  //弹框中需要展示的广告页面
           type: 'iframe',
           width: 680,
           height: 430,
           autoSize: true,
        });
      
        //可以通过下面的方式设置iframe的一些css样式          
        let fancyboxFrame = document.getElementsByClassName('fancybox-iframe')[0];
        fancyboxFrame.style.paddingTop = '40px'
        fancyboxFrame.style.paddingLeft = '20px'
    },100);
           
}

这样，在别的html页面中直接引入上面的index.js文件，调用openIFrame方法，就可以实现弹框了。

<!DOCTYPE html>
<html>
<head>
	<title>店铺绑定</title>
   <script type="text/javascript" src="./index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="button" value="查看广告" id="seeActivity" />
</body>
<script>
	 
   $(function(){
   		$('#seeActivity').click(function(){
   			openIFrame()	
   		})
	});
</script>
</html>