script跨域获取iframe使用swiper实现轮播‘

今天做了一个iframe的轮播图,利用script标签跨域获取里面的url的值,作为iframe的src的值,然后利用swiper组件实现轮播。

目的域名:https://vipcdn.mgtv.com/upload5/file/container_url.js

封装一个loadScript()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
function loadScript() {
var scriptTag = document.createElement("script");
scriptTag.src = "https://vipcdn.mgtv.com/upload5/file/container_url.js";
document.body.appendChild(scriptTag);
scriptTag.onload = function () {
// console.log(window.__URL__);
for (let i = 0; i < window.__URL__.length; i++) {
var oI = document.getElementsByTagName("iframe");
oI[i].src = window.__URL__[i].url;
// console.log("111");
}
};
}

新建一个script标签,设置其src指向目标js,将script标签挂载到dom上。将获取的数据填充到iframe标签上要等script onload加载完才可以。因为目标js中定义的是一个全局的变量,所以可以直接获取。

控制台打印结果,可以看到成功拿到了数据。

image-20200923223944754

调用轮播组件

我用的是swiper组件,找了个官网实例搬过来了

js:

查看评论