244 lines
8.8 KiB
JavaScript
244 lines
8.8 KiB
JavaScript
|
// packages/embed-loader/src/loader.js
|
|||
|
|
// PhotoLive 悬浮轮播组件加载器 v1 —— 对外发布物（esbuild 打包为 dist/v1/loader.js，
|
|||
|
|
// 由 viewer 静态服务，宿主以 <script src="{EMBED_ORIGIN}/embed/v1/loader.js" data-slot> 引入）。
|
|||
|
|
// 约束：零依赖、零全局（仅版本标记属性）、无 console、一切错误静默不抛（A11 不破坏宿主）。
|
|||
|
|
// 安全模型（postMessage 双向白名单 / sandbox 取舍）见同包 README-embed.md。
|
|||
|
|
import {
|
|||
|
|
parseEmbedConfig,
|
|||
|
|
buildEmbedUrl,
|
|||
|
|
clampHeight,
|
|||
|
|
SIZE_WIDTH,
|
|||
|
|
} from './params.js';
|
|||
|
|
|
|||
|
|
(function () {
|
|||
|
|
'use strict';
|
|||
|
|
try {
|
|||
|
|
var w = window;
|
|||
|
|
// 已初始化去重：同一页面重复引入 loader 只跑一次（不同 slot 的多个标签在首次运行时全部扫描）。
|
|||
|
|
if (w.__photoliveEmbedV1) return;
|
|||
|
|
w.__photoliveEmbedV1 = '1';
|
|||
|
|
|
|||
|
|
var COLLAPSE_KEY = 'pl-embed-collapsed:';
|
|||
|
|
var Z_INDEX = '2147483000';
|
|||
|
|
var DEFAULT_HEIGHT = 96; // 首条 resize 消息前的占位高度
|
|||
|
|
|
|||
|
|
function readCollapsed(slot) {
|
|||
|
|
try {
|
|||
|
|
return w.sessionStorage.getItem(COLLAPSE_KEY + slot) === '1';
|
|||
|
|
} catch {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function writeCollapsed(slot, collapsed) {
|
|||
|
|
try {
|
|||
|
|
if (collapsed) w.sessionStorage.setItem(COLLAPSE_KEY + slot, '1');
|
|||
|
|
else w.sessionStorage.removeItem(COLLAPSE_KEY + slot);
|
|||
|
|
} catch {
|
|||
|
|
/* Safari 隐私模式等 storage 异常：静默放弃记忆 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自发现：currentScript（defer 下同步执行仍可用）→ 兜底最后一个匹配标签。
|
|||
|
|
function selfScript() {
|
|||
|
|
if (document.currentScript && document.currentScript.src) return document.currentScript;
|
|||
|
|
var all = document.querySelectorAll('script[src*="/embed/v1/loader.js"]');
|
|||
|
|
return all.length ? all[all.length - 1] : null;
|
|||
|
|
}
|
|||
|
|
function originOf(el) {
|
|||
|
|
try {
|
|||
|
|
return new URL(el.src, w.location.href).origin;
|
|||
|
|
} catch {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var instances = [];
|
|||
|
|
var seenSlots = {};
|
|||
|
|
|
|||
|
|
function handleLabel(lang) {
|
|||
|
|
if (lang === 'zh-CN') return '展开照片轮播';
|
|||
|
|
if (lang === 'en') return 'Show photo carousel';
|
|||
|
|
return 'Show photo carousel';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createHandle(inst) {
|
|||
|
|
var h = document.createElement('div');
|
|||
|
|
var side = inst.config.position === 'left' ? 'left' : 'right';
|
|||
|
|
h.setAttribute('role', 'button');
|
|||
|
|
h.setAttribute('tabindex', '0');
|
|||
|
|
h.setAttribute('aria-label', handleLabel(inst.config.lang));
|
|||
|
|
var s = h.style;
|
|||
|
|
s.position = 'fixed';
|
|||
|
|
s.bottom = '24px';
|
|||
|
|
s[side] = '16px';
|
|||
|
|
s.width = '44px';
|
|||
|
|
s.height = '44px';
|
|||
|
|
s.borderRadius = '50%';
|
|||
|
|
s.background = 'rgba(15,23,42,0.88)';
|
|||
|
|
s.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
|
|||
|
|
s.zIndex = Z_INDEX;
|
|||
|
|
s.cursor = 'pointer';
|
|||
|
|
s.display = 'flex';
|
|||
|
|
s.alignItems = 'center';
|
|||
|
|
s.justifyContent = 'center';
|
|||
|
|
h.innerHTML =
|
|||
|
|
'<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false">' +
|
|||
|
|
'<path fill="%23ffffff" d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>';
|
|||
|
|
function activate(ev) {
|
|||
|
|
if (ev.type === 'keydown') {
|
|||
|
|
var k = ev.key;
|
|||
|
|
if (k !== 'Enter' && k !== ' ' && k !== 'Spacebar') return;
|
|||
|
|
ev.preventDefault();
|
|||
|
|
}
|
|||
|
|
expandInstance(inst);
|
|||
|
|
// 通知 iframe 内部恢复轮播/可见行为；目标源严格限定 iframe 源（绝不 '*'）。
|
|||
|
|
try {
|
|||
|
|
if (inst.frame.contentWindow) {
|
|||
|
|
inst.frame.contentWindow.postMessage(
|
|||
|
|
{ photoliveEmbed: true, type: 'expand' },
|
|||
|
|
inst.frameOrigin
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
/* 静默 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
h.addEventListener('click', activate);
|
|||
|
|
h.addEventListener('keydown', activate);
|
|||
|
|
return h;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function collapseInstance(inst) {
|
|||
|
|
if (inst.collapsed) return;
|
|||
|
|
inst.collapsed = true;
|
|||
|
|
inst.wrapper.style.height = '0px';
|
|||
|
|
inst.wrapper.style.boxShadow = 'none';
|
|||
|
|
if (!inst.handle) {
|
|||
|
|
inst.handle = createHandle(inst);
|
|||
|
|
document.body.appendChild(inst.handle);
|
|||
|
|
}
|
|||
|
|
inst.handle.style.display = 'flex';
|
|||
|
|
writeCollapsed(inst.config.slot, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function expandInstance(inst) {
|
|||
|
|
if (!inst.collapsed) return;
|
|||
|
|
inst.collapsed = false;
|
|||
|
|
inst.wrapper.style.height = inst.height + 'px';
|
|||
|
|
inst.wrapper.style.boxShadow = '0 4px 16px rgba(0,0,0,0.18)';
|
|||
|
|
if (inst.handle) inst.handle.style.display = 'none';
|
|||
|
|
writeCollapsed(inst.config.slot, false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createInstance(origin, config) {
|
|||
|
|
var wrapper = document.createElement('div');
|
|||
|
|
var side = config.position === 'left' ? 'left' : 'right';
|
|||
|
|
var ws = wrapper.style;
|
|||
|
|
ws.position = 'fixed';
|
|||
|
|
ws.bottom = '24px';
|
|||
|
|
ws[side] = '16px';
|
|||
|
|
ws.width = SIZE_WIDTH[config.size] + 'px';
|
|||
|
|
ws.height = DEFAULT_HEIGHT + 'px';
|
|||
|
|
ws.zIndex = Z_INDEX;
|
|||
|
|
ws.borderRadius = '12px';
|
|||
|
|
ws.boxShadow = '0 4px 16px rgba(0,0,0,0.18)';
|
|||
|
|
ws.overflow = 'hidden';
|
|||
|
|
|
|||
|
|
var frame = document.createElement('iframe');
|
|||
|
|
// sandbox 必须含 allow-same-origin（评审修正）：否则 iframe 为 opaque 源 "null"，
|
|||
|
|
// loader 的「消息 origin === iframe 源」白名单会拒掉自己的 resize/collapse，
|
|||
|
|
// 且 iframe 内取公开 API 需 ACAO *。宿主↔iframe 天然跨源，same-origin 仅使
|
|||
|
|
// iframe 保有项目域源，白名单按源+source 双重严格校验兜底。
|
|||
|
|
frame.setAttribute(
|
|||
|
|
'sandbox',
|
|||
|
|
'allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin'
|
|||
|
|
);
|
|||
|
|
frame.setAttribute('src', buildEmbedUrl(origin, config.slot, config));
|
|||
|
|
frame.setAttribute('referrerpolicy', 'no-referrer-when-downgrade');
|
|||
|
|
frame.setAttribute('title', 'PhotoLive photos');
|
|||
|
|
var fs = frame.style;
|
|||
|
|
fs.width = '100%';
|
|||
|
|
fs.height = '100%';
|
|||
|
|
fs.border = '0';
|
|||
|
|
fs.display = 'block';
|
|||
|
|
wrapper.appendChild(frame);
|
|||
|
|
document.body.appendChild(wrapper);
|
|||
|
|
|
|||
|
|
var inst = {
|
|||
|
|
config: config,
|
|||
|
|
wrapper: wrapper,
|
|||
|
|
frame: frame,
|
|||
|
|
// 白名单基准源：从 iframe src 推导（构建后即固定，等于 EMBED_ORIGIN）。
|
|||
|
|
frameOrigin: originOf(frame) || origin,
|
|||
|
|
height: DEFAULT_HEIGHT,
|
|||
|
|
collapsed: false,
|
|||
|
|
handle: null,
|
|||
|
|
};
|
|||
|
|
instances.push(inst);
|
|||
|
|
// 收起记忆 / 窄屏默认收起：会话内不反复弹出（需求 9）。
|
|||
|
|
if (readCollapsed(config.slot) || config.collapsedDefault) collapseInstance(inst);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// postMessage 白名单：仅 photoliveEmbed===true 且 type∈{resize,collapse,expand}，
|
|||
|
|
// 且 event.source 命中已登记 iframe 且 event.origin 严格等于该 iframe 的源。
|
|||
|
|
w.addEventListener('message', function (event) {
|
|||
|
|
try {
|
|||
|
|
var data = event.data;
|
|||
|
|
if (!data || data.photoliveEmbed !== true) return;
|
|||
|
|
var type = data.type;
|
|||
|
|
if (type !== 'resize' && type !== 'collapse' && type !== 'expand') return;
|
|||
|
|
for (var i = 0; i < instances.length; i++) {
|
|||
|
|
var inst = instances[i];
|
|||
|
|
if (!inst.frame.contentWindow || event.source !== inst.frame.contentWindow) continue;
|
|||
|
|
if (event.origin !== inst.frameOrigin) return;
|
|||
|
|
if (type === 'resize') {
|
|||
|
|
var h = clampHeight(data.height);
|
|||
|
|
if (h !== null) {
|
|||
|
|
inst.height = h;
|
|||
|
|
if (!inst.collapsed) inst.wrapper.style.height = h + 'px';
|
|||
|
|
}
|
|||
|
|
} else if (type === 'collapse') {
|
|||
|
|
collapseInstance(inst);
|
|||
|
|
} else {
|
|||
|
|
expandInstance(inst);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
/* 静默 */
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function init() {
|
|||
|
|
var self = selfScript();
|
|||
|
|
if (!self) return;
|
|||
|
|
var embedOrigin = originOf(self);
|
|||
|
|
if (!embedOrigin) return;
|
|||
|
|
var narrow = false;
|
|||
|
|
try {
|
|||
|
|
narrow = !!w.matchMedia && w.matchMedia('(max-width: 479px)').matches;
|
|||
|
|
} catch {
|
|||
|
|
narrow = false;
|
|||
|
|
}
|
|||
|
|
// 扫描全部 loader 标签：单标签单槽为主路径，多标签（多槽/集中引入）一并覆盖；
|
|||
|
|
// 同 data-slot 重复出现时后者静默忽略。
|
|||
|
|
var tags = document.querySelectorAll('script[src*="/embed/v1/loader.js"]');
|
|||
|
|
for (var i = 0; i < tags.length; i++) {
|
|||
|
|
var config = parseEmbedConfig(tags[i].dataset, { narrow: narrow });
|
|||
|
|
if (!config.slot) continue;
|
|||
|
|
if (seenSlots[config.slot]) continue;
|
|||
|
|
seenSlots[config.slot] = true;
|
|||
|
|
createInstance(embedOrigin, config);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (document.body) {
|
|||
|
|
init();
|
|||
|
|
} else {
|
|||
|
|
document.addEventListener('DOMContentLoaded', init);
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
/* 静默：任何异常不得破坏宿主页 */
|
|||
|
|
}
|
|||
|
|
})();
|