Skip to content

I
IPC-footer
Commit 61790964 authored by Allen Bai's avatar Allen Bai
Browse files
Options

feat: 完善挂载机制，避免重复挂载

parent 5404157d
Show whitespace changes
Inline Side-by-side
Showing with 97 additions and 13 deletions
example/inHTML/h5_customize.html 0 → 100644
View file @ 61790964
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>线上页面引入方法</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(35, 155, 86);
}
</style>
</head>
<body>
<div style="height: 200vh;border:5px slateblue solid"></div>
<script>
// 百奇商品详情页建议用这个
(function (e) {
const IPCFooterConfig = {
dom: '.detail-main',
footerStyles: {
position: 'static',
margin: '8px 0 60px 0'
}
}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "//yun.tuisnake.com/ipc-footer-sdk/ipc-footer-sdk.js"),
(r.crossOrigin = "anonymous"),
(r.onload = function () {
window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig)
}),
document.body && document.body.appendChild(r);
};
loadScript()
})(window);
</script>
</body>
</html>
src/index.ts
View file @ 61790964
...@@ -59,9 +59,15 @@ function getIPCByDomain(domain: string) { ...@@ -59,9 +59,15 @@ function getIPCByDomain(domain: string) {
} }
type IPCFooterOptions = { type IPCFooterOptions = {
/** 自定义域名，默认自动从url取 */
domain?: string domain?: string
dom?: HTMLElement /** 要挂载的dom节点，默认为body */
dom?: HTMLElement | string
/** 延迟几秒渲染，默认300毫秒 */
delay?: number
/** 页脚样式 */
footerStyles?: Optional<CSSStyleDeclaration> footerStyles?: Optional<CSSStyleDeclaration>
/** 页脚内链接的样式 */
boardStyles?: Optional<CSSStyleDeclaration> boardStyles?: Optional<CSSStyleDeclaration>
} }
...@@ -94,11 +100,19 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = { ...@@ -94,11 +100,19 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
fontSize: '12px' fontSize: '12px'
} }
let currentTaskId = null
/** /**
* 挂载 * 挂载
* @param {IPCFooterOptions} opts * @param {IPCFooterOptions} opts
*/ */
async function mountIPCFooter(opts: IPCFooterOptions = {}) { async function mountIPCFooter(opts: IPCFooterOptions = {}) {
// 如果已经挂载了一个IPCFooter 就先卸载掉，避免重复挂载
unmount()
// 当前任务的id
const taskId = new Date().getTime()
currentTaskId = taskId
let IPCNumberString = '' let IPCNumberString = ''
try { try {
IPCNumberString = (await getIPCByDomain(opts.domain || location.host)) as string IPCNumberString = (await getIPCByDomain(opts.domain || location.host)) as string
...@@ -108,7 +122,6 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) { ...@@ -108,7 +122,6 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {
const IPCFooter = document.createElement('div') const IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a') const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body')
IPCFooter.id = '__IPC_footer__' IPCFooter.id = '__IPC_footer__'
IPCBoard.id = '__IPC_board__' IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) }) addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
...@@ -116,7 +129,39 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) { ...@@ -116,7 +129,39 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {
IPCBoard.innerText = (IPCNumberString as string) || 'IPC备-' IPCBoard.innerText = (IPCNumberString as string) || 'IPC备-'
IPCBoard.href = 'https://beian.miit.gov.cn/#/Integrated/index' IPCBoard.href = 'https://beian.miit.gov.cn/#/Integrated/index'
IPCFooter.appendChild(IPCBoard) IPCFooter.appendChild(IPCBoard)
let tryCount = 6
function __mount__() {
let targetDom
if (opts.dom === undefined || opts.dom === null) {
targetDom = document.querySelector('body')
} else if (typeof opts.dom === 'string') {
targetDom = document.querySelector(targetDom)
} else {
targetDom = opts.dom
}
if (!targetDom) {
// 可能目标dom节点还没挂载
if (tryCount > 0) {
tryCount--
return setTimeout(__mount__, 500)
}
return
}
// 当taskId和currentTaskId不相等时，说明有新的挂载任务进行中，当前任务就abort掉
if (taskId !== currentTaskId) {
return
}
setTimeout(() => {
targetDom.appendChild(IPCFooter) targetDom.appendChild(IPCFooter)
currentTaskId = null
}, opts.delay || 300)
}
__mount__()
} }
/** /**
...@@ -135,16 +180,7 @@ function unmount() { ...@@ -135,16 +180,7 @@ function unmount() {
* @param {IPCFooterOptions} opts * @param {IPCFooterOptions} opts
*/ */
function remount(opts: IPCFooterOptions = {}) { function remount(opts: IPCFooterOptions = {}) {
let target = document.getElementById('__IPC_footer__')
if (target) {
unmount()
mountIPCFooter(opts) mountIPCFooter(opts)
} else {
setTimeout(() => {
unmount()
mountIPCFooter(opts)
}, 800)
}
} }
export default { getIPCByDomain, mountIPCFooter, unmount, remount } export default { getIPCByDomain, mountIPCFooter, unmount, remount }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment