使用Fancybox实现iframe弹出框
年凯康
前景
公司要求封装一个js来实现一个弹出框的广告，以便外部的平台来调用。正好js~fancybox为我们提供了iframe功能。我们可以直接使用，不用自己去实现。
fancybox介绍
需要注意的是：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>
类似资料：