目录
二、react项目中跳转ifame、一定要在请求成功获取数据后再通过postMessage传参、不能同步加载、在源码的基础上添加了分页加载功能、优化源码渲染的问题
一、FlipBookPlugins.js库、flipHtml5.hiSlider.js封装、可查看文件类型:img、video、通过更改源码、同时兼容图片和视频的展示、可通过ifame加载、使用postMessage传参渲染
二、react项目中跳转ifame、一定要在请求成功获取数据后再通过postMessage传参、不能同步加载、在源码的基础上添加了分页加载功能、优化源码渲染的问题
async getAlbumArtworkList() {
const queryString = window.location.search;
const decodedParams = decodeURIComponent(queryString);
const urlParams = new URLSearchParams(decodedParams);
const id = urlParams.get('id');
const pageNumber = urlParams.get('pageNumber');
const pageSize = urlParams.get('pageSize');
const userId = urlParams.get('userId');
try {
const [res] = await Promise.all([
request({
url: api.getAlbumArtworkList,
data: {
id,
pageNumber,
pageSize,
userId,
},
}),
]);
this.isRequest = false;
const list = res.data.list;
const idUrlArrayWithPrefix = this.buildIdUrlArrayWithPrefix(list);
this.encodedUrls = encodeURIComponent(
JSON.stringify(idUrlArrayWithPrefix)
);
//请求数据后再去跳转ifame
this.ifameState = true;
//ifame传参
const iframe = document.getElementById("my-iframe");
if (iframe) {
iframe.addEventListener("load", () => {
iframe.contentWindow.postMessage(this.encodedUrls, "*");
});
}
} catch (error) {
this.isRequest = false;
stores.Frame.error(error.message);
}
}
buildIdUrlArrayWithPrefix(list) {
const queryString = window.location.search;
const decodedParams = decodeURIComponent(queryString);
const urlParams = new URLSearchParams(decodedParams);
const id = urlParams.get("id");
const cover = urlParams.get("cover");
return list.reduce(
(acc, obj) => {
const { url, id: objId, cover: objCover } = obj;
const isVideo = url.endsWith(".mp4");
const idUrlWithPrefix = {
url: utils.pictureThumb(isVideo ? objCover : url, !isVideo),
id: objId,
...(isVideo && { videoUrl: utils.pictureThumb(url, false) }),
};
return [...acc, idUrlWithPrefix];
},
[{ url: utils.pictureThumb(cover), id }]
);
}
三、效果展示图、兼容PC端、H5端