Skip to content

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

feat: 修改定位方式

parent 3f5da8d9
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 62 deletions
.prettierrc
View file @ 5517dd9b
......@@ -6,7 +6,7 @@
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"insertPragma": true,
"tabWidth": 4,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true
}
\ No newline at end of file
}
example/inHTML/h5_scroll.html 0 → 100644
View file @ 5517dd9b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>直接用script引入</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 = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "../../dist/IPCHelper.main.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>
example/inHTML/h5_without_scroll.html 0 → 100644
View file @ 5517dd9b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>直接用script引入</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(35, 155, 86);
}
</style>
</head>
<body>
<script>
(function (e) {
const IPCFooterConfig = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "../../dist/IPCHelper.main.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>
example/inHTML/index.html
View file @ 5517dd9b
......@@ -3,38 +3,46 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直接用script引入</title>
<style>
* {
margin: 0;
padding: 0;
margin: 0;
}
iframe {
border: 1px solid black;
display: block;
}
.box {
margin: 10px 20px;
}
.phone {
width: 375px;
height: 667px;
}
html,
body {
background-color: rgb(35, 155, 86);
.desk {
width: 1200px;
height: 600px;
}
</style>
</head>
<body>
<script>
(function (e) {
const IPCFooterConfig = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "../../dist/IPCHelper.main.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>
<div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;padding:30px;">
<div class="box">
<h5>不带滚动的</h5>
<iframe class="phone" src="./h5_without_scroll.html" frameborder="0"></iframe>
</div>
<div class="box">
<h5>带滚动的</h5>
<iframe class="phone" src="./h5_scroll.html" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
src/index.ts
View file @ 5517dd9b
......@@ -2,59 +2,59 @@
type Optional<T> = { [P in keyof T]?: T[P] }
function getIPCByDomain(domain: string) {
return new Promise((resolve, reject) => {
resolve('1231232123')
})
return new Promise((resolve, reject) => {
resolve('1231232123')
})
}
type IPCFooterOptions = {
domain?: string
dom?: HTMLElement
footerStyles?: Optional<CSSStyleDeclaration>
boardStyles?: Optional<CSSStyleDeclaration>
domain?: string
dom?: HTMLElement
footerStyles?: Optional<CSSStyleDeclaration>
boardStyles?: Optional<CSSStyleDeclaration>
}
function addStyles(ele: HTMLElement, styles: Optional<CSSStyleDeclaration> = {}) {
Object.entries(styles).forEach(([key, val]) => {
ele.style[key] = val
})
Object.entries(styles).forEach(([key, val]) => {
ele.style[key] = val
})
}
const defaultFooterStyles: Optional<CSSStyleDeclaration> = {
width: '100vw',
position: 'absolute',
left: '0',
right: '0',
bottom: '0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
width: '100vw',
position: 'fixed',
left: '0',
right: '0',
bottom: '0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
display: 'inline-block',
textDecoration: 'none',
color: '#FFF',
backgroundColor: 'rgba(0,0,0,.4)',
margin: '4px auto',
height: '22px',
lineHeight: '22px',
padding: '0 20px',
borderRadius: '4px',
fontSize: '12px'
display: 'inline-block',
textDecoration: 'none',
color: '#FFF',
backgroundColor: 'rgba(0,0,0,.4)',
margin: '4px auto',
height: '22px',
lineHeight: '22px',
padding: '0 20px',
borderRadius: '4px',
fontSize: '12px'
}
async function mountIPCFooter(opts: IPCFooterOptions) {
const icpNumber = await getIPCByDomain(opts.domain || location.host)
const IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body')
IPCFooter.id = '__IPC_footer__'
IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) })
IPCBoard.innerText = `浙ICP备${icpNumber}号`
IPCFooter.appendChild(IPCBoard)
targetDom.appendChild(IPCFooter)
const icpNumber = await getIPCByDomain(opts.domain || location.host)
const IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body')
IPCFooter.id = '__IPC_footer__'
IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) })
IPCBoard.innerText = `浙ICP备${icpNumber}号`
IPCFooter.appendChild(IPCBoard)
targetDom.appendChild(IPCFooter)
}
export default { getIPCByDomain, mountIPCFooter }
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